仿china.nba.com焦点图效果(ie6,ff)-优快云博客

本文介绍了一个简单的图片轮播插件的实现方法，通过HTML和JavaScript实现了图片的自动切换和手动选择功能，适用于网页设计中需要展示多张图片的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>NewDocument</TITLE>
<styletype="text/css">
#fours_m{z-index:-10;width:430px;height:382px;background:#053783url(http://www.kuanghong.com/han/images/fours_bj.gif)repeat-x0bottom;}
#f_img_roll{float:left;width:350px;height:300px;position:relative}
#f_img_rollimg{position:absolute;left:0;top:0}
#f_img_s{float:right;position:relative;width:80px;height:300px;}
#f_img_sul{margin:0;padding:0;margin-left:6px;list-style:none;}
#f_img_sli{width:60px;height:45px;border:1pxsolid#0066cc;margin-top:3px;}
#f_img_simg{width:54px;height:39px;border:3pxsolid#000066;vertical-align:top;}
#f_img_sdiv{top:3px}
#f_mask{position:absolute;top:3px;right:12px;width:75px;height:47px;background:url(http://www.kuanghong.com/han/images/mask.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>
<scripttype="text/javascript">
//图片资源
varimgs_m=[],imgs_s=[],imgs_title=[];
imgs_m[0]="http://www.kuanghong.com/han/images/img_1.jpg";
imgs_m[1]="http://www.kuanghong.com/han/images/img_2.jpg";
imgs_m[2]="http://www.kuanghong.com/han/images/img_3.jpg";
imgs_m[3]="http://www.kuanghong.com/han/images/img_4.jpg";
imgs_m[4]="http://www.kuanghong.com/han/images/img_5.jpg";
imgs_m[5]="http://www.kuanghong.com/han/images/img_6.jpg";
imgs_s[0]="http://www.kuanghong.com/han/images/img_1_0.jpg";
imgs_s[1]="http://www.kuanghong.com/han/images/img_2_0.jpg";
imgs_s[2]="http://www.kuanghong.com/han/images/img_3_0.jpg";
imgs_s[3]="http://www.kuanghong.com/han/images/img_4_0.jpg";
imgs_s[4]="http://www.kuanghong.com/han/images/img_5_0.jpg";
imgs_s[5]="http://www.kuanghong.com/han/images/img_6_0.jpg";

imgs_title[0]="第一张";
imgs_title[1]="第二张";
imgs_title[2]="第三张";
imgs_title[3]="第四张";
imgs_title[4]="第五张";
imgs_title[5]="第六张";
//显示小图
functionimgs_s_dis(){
varimgs=document.getElementById("imgs");
varfr=document.createDocumentFragment();
for(vari=0;i<imgs_s.length;i++){
varli=document.createElement("li");
li.innerHTML="<imgsrc='"+imgs_s[i]+"'alt=''/>";
lis.push(li);
fr.appendChild(li);
}
imgs.appendChild(fr);
}

//图片切换
functionimg_scroll(num){
cur_img.src=imgs_m[num];
img_title.innerHTML=imgs_title[num];
}

//图片切换效果
varie=/MSIE/.test(navigator.userAgent);//浏览器
varimg_title=null;//title
varf_img_roll=null;//大图
varcur_img=null;//当前大图
varmb_img=null;//目标图
varf_mask=null;//MASK层
varlis=[];//所有LI
varcur_li=null;//当前MASK所在LI
varmb_li=null;//目标LI位置
vartt=null;//时间函数
varm=0;//默认top
varr=0;//当前lis下标

//自动播放
functionimg_play(){
r++;
if(r>lis.length-1)r=0;
mb_li=lis[r].offsetTop;
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(vari=0;i<lis.length;i++){
lis[i].onmouseover=function(){
this.style.border="1pxsolid#cc0000";
}
lis[i].onmouseout=function(){
this.style.border="1pxsolid#0066cc";
}
lis[i].num=i;
lis[i].onclick=function(){
if(cur_li!=this){
clearTimeout(ttt);//停止自动播放
r=this.num;
mb_li=this.offsetTop;
tt=setInterval("f_mask_mov()",25);
cur_li=this;
img_scroll(this.num);
}
}
}
ttt=setTimeout("img_play()",3000);//开始自动播放
}

//滑动效果
functionf_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>
<divid="fours_m">
<divid="f_img_roll"><imgsrc="http://www.kuanghong.com/han/images/img_1.jpg"/></div>
<divid="f_img_s">
<divid="f_mask"></div>
<ulid="imgs"></ul>
</div>
<divid="f_title">第一张</div>
</div>
</BODY>
</HTML>