NBA网站大幅JS焦点图切换

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>NBA大幅焦点图切换</TITLE>
<style type="text/css">
#fours_m{z-index:-10; width:430px; height:382px; background:#053783 url(//ku.shouce.ren/files/images/201601/56a33fca62d05.gif) repeat-x 0 bottom;}
#f_img_roll{float:left;width:350px; height:300px; position:relative}
#f_img_roll img{position:absolute; left:0; top:0}
#f_img_s{float:right; position:relative; width:80px; height:300px;}
#f_img_s ul{margin:0; padding:0; margin-left:6px; list-style:none;}
#f_img_s li{width:60px; height:45px;border:1px solid #0066cc;margin-top:3px;}
#f_img_s img{width:54px; height:39px; border:3px solid #000066;vertical-align:top; }
#f_img_s div{top:3px}
#f_mask{position:absolute; top:3px; right:12px; width:75px; height:47px; background:url(//ku.shouce.ren/files/images/201601/56a33fcb37b61.gif) no-repeat;}
#f_title{font-size:16px; font-weight:bold; clear:both; margin-top:10px; text-align:center; color:#fff; height:70px; width:80%}
</style>
<script type="text/javascript">
//图片资源
var imgs_m=[],imgs_s=[],imgs_title=[];
		imgs_m[0]="//ku.shouce.ren/files/images/201601/56a33fcc0930e.jpg";
		imgs_m[1]="//ku.shouce.ren/files/images/201601/56a33fccefe4b.jpg";
		imgs_m[2]="//ku.shouce.ren/files/images/201601/56a33fcdb281e.jpg";
		imgs_m[3]="//ku.shouce.ren/files/images/201601/56a33fcf0a06f.jpg";
		imgs_m[4]="//ku.shouce.ren/files/images/201601/56a33fd0b7e9f.jpg";
		imgs_m[5]="//ku.shouce.ren/files/images/201601/56a33fd2cb95c.jpg";
		imgs_s[0]="//ku.shouce.ren/files/images/201601/56a33fd48caae.jpg";
		imgs_s[1]="//ku.shouce.ren/files/images/201601/56a33fd50fa5d.jpg";
		imgs_s[2]="//ku.shouce.ren/files/images/201601/56a33fd59901e.jpg";
		imgs_s[3]="//ku.shouce.ren/files/images/201601/56a33fd61fed4.jpg";
		imgs_s[4]="//ku.shouce.ren/files/images/201601/56a33fd698cbd.jpg";
		imgs_s[5]="//ku.shouce.ren/files/images/201601/56a33fd729418.jpg";
		
		imgs_title[0]="第一张";
		imgs_title[1]="第二张";
		imgs_title[2]="第三张";
		imgs_title[3]="第四张";
		imgs_title[4]="第五张";
		imgs_title[5]="第六张";
	//显示小图
	function imgs_s_dis(){
		var imgs=document.getElementById("imgs");
		var fr=document.createDocumentFragment();
		for(var i=0;i<imgs_s.length;i++){
			var li=document.createElement("li");
				li.innerHTML="<img src='"+imgs_s[i]+"' alt='' />";
				lis.push(li);
				fr.appendChild(li);
		}
		imgs.appendChild(fr);
	}
	
	//图片切换
	function img_scroll(num){
		cur_img.src=imgs_m[num];
		img_title.innerHTML=imgs_title[num];
	}
	
	//图片切换效果
	 var ie=/MSIE/.test(navigator.userAgent);//浏览器
	 var img_title=null;//title
	 var f_img_roll=null;//大图
	 var cur_img=null;//当前大图
	 var mb_img=null;//目标图
	 var f_mask=null;//MASK层
	 var lis=[];//所有LI
	 var cur_li=null;//当前MASK所在LI
	 var mb_li=null;//目标LI位置
	 var tt=null;//时间函数
	 var m=0;//默认top
	 var r=0;//当前lis下标
	 
	 //自动播放
	 function img_play(){
		r++;
		if(r>lis.length-1)r=0;
		mb_li=lis[r].offsetTop;
		if(tt)clearTimeout(tt);
		tt=setInterval("f_mask_mov()",25);
		cur_li=lis[r];
		img_scroll(r);
		
	 }
	
	 //加载动作
	 function _focus(){
		imgs_s_dis();//初始小图显示
		cur_li=lis[0];//初始当前mask所在元素
		f_img_roll=document.getElementById("f_img_roll");
		cur_img=f_img_roll.getElementsByTagName("img")[0];//得到默认大图引用
		img_title=document.getElementById("f_title");
		f_mask=document.getElementById("f_mask");//得到MASK引用
		for(var i=0;i<lis.length;i++){
			lis[i].onmouseover=function(){
				this.style.border="1px solid #cc0000";
			}
			lis[i].onmouseout=function(){
				this.style.border="1px solid #0066cc";
			}
			lis[i].num=i;
			lis[i].onclick=function(){
				if(cur_li!=this){
					if(tt)clearTimeout(tt);//停止正在的播放
					clearTimeout(ttt);//停止自动播放
					r=this.num;
					mb_li=this.offsetTop;
					tt=setInterval("f_mask_mov()",40);
					cur_li=this;
					img_scroll(this.num);
				}
			}
		}
		ttt=setTimeout("img_play()",3000);//开始自动播放
	 }
	 
	 //滑动效果
	 function f_mask_mov(){
		if(m>mb_li){
			m-=(m-mb_li)*0.2;
			if((m-1)<mb_li){
				clearTimeout(tt);
				f_mask.style.top=mb_li+"px";
				f_mask_top=mb_li;//更新M值
				m=mb_li;
				ttt=setTimeout("img_play()",3000);//开始自动播放
				return;
			}else{
				f_mask.style.top=m+"px";
			}
		}else{
			m+=(mb_li+5-m)*0.2;
			if(m>mb_li){
				clearTimeout(tt);
				f_mask.style.top=mb_li+"px";
				m=f_mask_top=f_mask.offsetTop;//更新M值
				ttt=setTimeout("img_play()",3000);//开始自动播放
				return;
			}else{
				f_mask.style.top=m+"px";
			}
		}
		
	 }
	 window.onload=_focus;
  </script>
</HEAD>
<BODY>
<div id="fours_m">
  <div id="f_img_roll"><img src="//ku.shouce.ren/files/images/201601/56a33fcc0930e.jpg" /></div>
  <div id="f_img_s">
    <div id="f_mask"></div>
    <ul id="imgs"></ul>
  </div>
  <div id="f_title">第一张</div>
</div>
</BODY>
</HTML>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

NBA网站大幅JS焦点图切换

分类

图片代码

描述

NBA网站的大幅焦点图切换效果，代码里有较多的注释，适合研究一下，图片是远程地址，你最好保存到本地，本焦点图是动态变化，会自动播放，鼠标点击的时候会响应鼠标，用JavaScript实现的。