本来想照着网上的效果模拟一个（说来惭愧，我现在除了模仿就是抄），忽然发现我对计时器的应用不是很熟练，本想来面向对象的，可是我觉得还是先联系计时器，增加一下基础知识吧，要不感觉好不给力啊。
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>幻灯片</title> <style type="text/css"> * {margin:0;padding:0;} body {font-size:12px;color:#222;font-family:Verdana, Arial, Helvetica, sans-serif;background:#f0f0f0;} ul, li {list-style:none;} img {border:0;display:block;width:100%;} #focus {width:1200px;height:300px;overflow:hidden;margin:0 auto;margin:100px auto;position:relative;} #focus ul{ height:280px;} #focus ul li {display:block;position:absolute;} .a {width:600px;height:210px;left:0;top:20px;z-index:1;} .b {width:700px;height:245px;left:100px;top:10px;z-index:2} .c {width:800px;left:200px;top:0;z-index:3} .d {width:700px;height:245px;left:400px;top:10px;z-index:2} .e {width:600px;height:210px;left:600px;top:20px;z-index:1;} .indexNum{ height:20px; text-align:center;} .indexNum a{ display:inline-block; width:15px; background:#990; height:15px; margin:5px 2px 0 2px;;} .indexNum a.cur{ background:#6F3;} </style> <script type="text/javascript"> </script> </head> <body> <div id="focus"> <ul> <li class="c"><img src="img/03.jpg" /></li> <li class="d"><img src="img/04.jpg" /></li> <li class="e"><img src="img/05.jpg" /></li> <li class="a"><img src="img/01.jpg" /></li> <li class="b"><img src="img/02.jpg" /></li> </ul> </div> </body> </html> <script type="text/javascript"> var o=document.getElementById("focus"); var aLi=o.getElementsByTagName("li"); var timer=null; var aBtnWrap=document.createElement("div"); aBtnWrap.className="indexNum"; for(var i=0;i<aLi.length;i++){ var aBtn=document.createElement("a"); aBtnWrap.appendChild(aBtn); } o.appendChild(aBtnWrap); var aBtn=o.getElementsByTagName("div")[0].getElementsByTagName("a"); var arr=[]; var key=0; aBtn[key].className="cur"; for(var i=0;i<aLi.length;i++){ aLi[i].style.cssText="top:"+creatJson(aLi[i]).top+"px;left:"+creatJson(aLi[i]).left+"px;"+creatJson(aLi[i]).width+"px;height:"+creatJson(aLi[i]).height+"px;z-index:"+creatJson(aLi[i]).zIndex; aLi[i].removeAttribute("class",""); arr.push(creatJson(aLi[i])); } for(var i=0;i<aLi.length;i++){ aBtn[i].index=aLi[i].index=i; aBtn[i].onclick=aLi[i].onclick=function(){ key=this.index; switchs(key) } } function switchs(key){ var t=[]; for(c=0;c<aBtn.length;c++){ aBtn[c].className=""; } aBtn[key].className="cur"; //制造新数组并且运动交换位置 for(z=0;z<aLi.length;z++){ if(key==aLi.length){ key=0; } t[key]=arr[z]; key++; } for(q=0;q<aLi.length;q++){ move(aLi[q],t[q]) } } function auto(){ clearInterval(timer); timer=setInterval(function(){ key++; if(key==aLi.length){ key=0; } switchs(key); },1000) } o.onmouseover=function(){ clearInterval(timer); } o.onmouseout=function(){ auto() } auto() //制作json数据 function creatJson(obj){ var Json={}; Json.top=parseInt(getcss(obj,"top")); Json.left=parseInt(getcss(obj,"left")); Json.width=parseInt(getcss(obj,"width")); Json.height=parseInt(getcss(obj,"height")); Json.zIndex=parseInt(getcss(obj,"zIndex")); return Json; } //运动框架，不包含透明度 function move(obj,json,fn){ clearInterval(obj.timer) obj.timer=setInterval(function(){ obj.bstop=true; for(i in json){ if(i=="zIndex"){ obj.style.zIndex=json[i]; }else{ var pos=parseInt(getcss(obj,i)); var speed=pos>json[i]?Math.floor(((json[i]-pos)/5)): Math.ceil(((json[i]-pos)/5)); obj.style[i]=speed+pos+"px"; if(parseInt(getcss(obj,i))!=json[i]){ obj.bstop=false; } } } if(obj.bstop){ clearInterval(obj.timer); fn && fn(); } },30) } //获取计算后的样式 function getcss(obj,attr){ return (obj.currentStyle||getComputedStyle(obj, false))[attr]; } </script>