这几天无聊的很
看着china.nba.com焦点图效果捣鼓了一下有待完善!
兼容性：IE6 , IE7 , Opera , FF , Netscape 全部兼容，哈哈，值得收藏！
JS的效果和NBA官方的那个Flash效果有的一拼，很不错，好像初始化图片没有预载入，所以第一次主图可能会不动，不过这倒问题不大
<!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>仿china.nba.com焦点图展示效果(ie6,ff) - 中国asp之家</TITLE> <style type="text/css"> #fours_m{z-index:-10; width:430px; height:382px; background:#053783 url(/article/UploadPic/20084/21/200842113113508.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(/article/UploadPic/20084/21/200842113118259.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]="/article/UploadPic/20084/21/200842113118288.jpg"; imgs_m[1]="/article/UploadPic/20084/21/200842113119819.jpg"; imgs_m[2]="/article/UploadPic/20084/21/200842113121171.jpg"; imgs_m[3]="/article/UploadPic/20084/21/200842113122134.jpg"; imgs_m[4]="/article/UploadPic/20084/21/200842113123555.jpg"; imgs_m[5]="/article/UploadPic/20084/21/200842113124686.jpg"; imgs_s[0]="/article/UploadPic/20084/21/200842113125960.jpg"; imgs_s[1]="/article/UploadPic/20084/21/200842113125390.jpg"; imgs_s[2]="/article/UploadPic/20084/21/200842113126970.jpg"; imgs_s[3]="/article/UploadPic/20084/21/200842113126170.jpg"; imgs_s[4]="/article/UploadPic/20084/21/200842113126526.jpg"; imgs_s[5]="/article/UploadPic/20084/21/200842113127365.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="/article/UploadPic/20084/21/200842113118288.jpg" /></div> <div id="f_img_s"> <div id="f_mask"></div> <ul id="imgs"></ul> </div> <div id="f_title"><a href="http://www.aspxhome.com">中国asp之家欢迎您！</a></div> </div> </BODY> </HTML> [提示：你可先修改部分代码，再按运行]
请稍等，评论加载中...