大家看看淘宝的首页,中间位置的图片自动切换功能,鼠标移动到页码上可以切换到当前号码的图片,其实是先起来很简单 <div style="float:top;width:200px;height:200px;"> <div style="position:absolute;z-index:1" mce_style="position:absolute;z-index:1"> <img id="topimg1" src="a.jpg" mce_src="a.jpg" style="width:200px;height:200px;position:absolute;"/> <img id="topimg2" src="b.jpg" mce_src="b.jpg" style="width:200px;height:200px;display:none;position:absolute;"/> <img id="topimg3" src="c.jpg" mce_src="c.jpg" style="width:200px;height:200px;display:none;position:absolute;"/> </div> <div style="float:top;width:200px;height:200px;padding-top:170px;padding-left:130px;;position:absolute;z-index:2;"> <span id="linkt1" οnmοuseοver="imgroll(1,1);" class="linkBox">1</span> <span id="linkt2" οnmοuseοver="imgroll(1,2);" class="linkBox">2</span> <span id="linkt3" οnmοuseοver="imgroll(1,3);" class="linkBox">3</span> </div> </div> var _imgrollindex = 1;//滚图起始序号 window.setTimeout("imgroll(0,"+_imgrollindex+")",1500); var imgroll=function(type,nowi){ //解析button的id,带字符串哦 //if(nowi.match("linkt")){ // nowi = nowi.slice(5); //} var imgnum = [1,2,3]; for(var i=1;i<=imgnum.length;i++){ if(i == nowi){ document.getElementById("topimg"+i).style.display=""; document.getElementById("linkt"+i).setAttribute("class","linkBoxchoose"); }else{ document.getElementById("topimg"+i).style.display="none"; document.getElementById("linkt"+i).setAttribute("class","linkBox"); } } if(1 == type){ //如果是鼠标滑过,保存下来,下一次循环为下一个标志 _imgrollindex = nowi; }else{ _imgrollindex = _imgrollindex+1; if(_imgrollindex > imgnum.length){ _imgrollindex = 1; } } if(0 == type){ //如果是自动滚动 window.setTimeout("imgroll(0,"+_imgrollindex+")",1500); } } 更好的一种是先方式,也是较为流行的方式是这样来做的: <div style="float:top;width:200px;height:200px;"> <div style="position:absolute;z-index:1" mce_style="position:absolute;z-index:1"> <img id="topimg11" src="a.jpg" mce_src="a.jpg" style="width:200px;height:200px;position:absolute;"/> <img id="topimg12" src="b.jpg" mce_src="b.jpg" style="width:200px;height:200px;display:none;position:absolute;"/> <img id="topimg13" src="c.jpg" mce_src="c.jpg" style="width:200px;height:200px;display:none;position:absolute;"/> </div> <div style="float:top;width:200px;height:200px;padding-top:170px;padding-left:130px;;position:absolute;z-index:2;"> <span id="linkt11" οnmοuseοver="imgroll2(1);clearInterval(interval1);" οnmοuseοut="interval1=window.setInterval('imgroll2(-1)',1000);" class="linkBox">1</span> <span id="linkt12" οnmοuseοver="imgroll2(2);clearInterval(interval1);" οnmοuseοut="interval1=window.setInterval('imgroll2(-1)',1000);" class="linkBox">2</span> <span id="linkt13" οnmοuseοver="imgroll2(3);clearInterval(interval1);" οnmοuseοut="interval1=window.setInterval('imgroll2(-1)',1000);" class="linkBox">3</span> </div> </div> var _newnowi=1; var imgroll2=function(id){ if(-1 != id){ _newnowi = id; } var imgnum = [1,2,3]; for(var i=1;i<=imgnum.length;i++){ if(i == _newnowi){ document.getElementById("topimg1"+i).style.display=""; document.getElementById("linkt1"+i).setAttribute("class","linkBoxchoose"); }else{ document.getElementById("topimg1"+i).style.display="none"; document.getElementById("linkt1"+i).setAttribute("class","linkBox"); } } _newnowi = _newnowi+1; if(_newnowi > imgnum.length){ _newnowi = 1; } } var interval1=window.setInterval("imgroll2(-1)",1000);