首先是html实现页面结构及主程序
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>基本动画-焦点图轮播</title> 6 <style type="text/css"> 7 #outer{ width:450px; height:230px; position:relative; margin:50px auto; background:pink; overflow:hidden;} 8 #inner{ width:2700px; height:230px; position:absolute; top:0px; left:0;} 9 #inner div{ width:450px; height:230px; float:left; line-height:230px; text-align:center; font-size:36px; font-weight:bold; color:#fff; background:red;} 10 ul#btn{ margin:0; padding:0; list-style:none; position:absolute; bottom:15px; right:15px; height:30px; width:230px;} 11 ul#btn li{ float:left; width:25px; margin-right:5px; height:25px; border:4px solid orange; border-radius:50%; font-size:24px; font-weight:bold; line-height:25px; text-align:center; background:#366; cursor:pointer; -webkit-user-select:none; } 12 ul#btn li.current{ background:white;} 13 </style> 14 </head> 15 16 <body> 17 <div id="outer"> 18 <div id="inner"> 19 <div>111111111111</div> 20 <div style="background:yellow; color:blue">222222222222</div> 21 <div style="background:black;">333333333333</div> 22 <div style="background:purple;">444444444444</div> 23 <div style="background:blue;">555555555555</div> 24 <div>111111111111</div> 25 26 </div> 27 <ul id="btn"> 28 <li class="current" >1</li> 29 <li >2</li> 30 <li >3</li> 31 <li >4</li> 32 <li >5</li> 33 </ul> 34 </div> 35 </body> 36 </html> 37 <script src="move.js"></script> 38 <script> 39 var oLis=document.getElementById('btn').getElementsByTagName('li'); 40 var oInner=document.getElementById('inner'); 41 for(var i=0;i<oLis.length;i++){ 42 oLis.item(i).n=i; 43 oLis.item(i).onclick=function(){ 44 move(oInner,"left",this.n*-450); 45 } 46 } 47 var step=0; 48 function autoMove(){ 49 if(step==oLis.length){//第六个图片对应是第一个li 50 oLis.item(0).className=""; 51 }else{//正常情况下，step在累加之前，总是表示上一个LI的索引 52 oLis.item(step).className=""; 53 } 54 step++; 55 if(step==oLis.length+1){//如果走到了第六张，则把坐标切换到第一张上来。 56 //alert(1);//暂停一下，更能理解原理 57 oInner.style.left=0;//切换坐标 58 step=1; //然后再从第一张往第二张上走，所以让step=1； 59 } 60 if(step==5){//第5个索引（就是第六张）对应的是第一张DIV，所以这儿要做个判断 61 oLis.item(0).className="current"; 62 }else{//正常情况下走到第几张，就让对应的li切换背景 63 oLis.item(step).className="current"; 64 } 65 move(oInner,"left",step*-450); 66 } 67 window.setInterval(autoMove,2000); 68 </script>
接下来在move.js里实现辅助函数
1 function move(ele,attr,target,fnCallback){ 2 clearInterval(ele[attr+"timer"]); 3 function _move(){//闭包方法 4 var cur=css(ele,attr);//当前位置 5 var nSpeed=(target-cur)/10; 6 nSpeed=nSpeed>0?Math.ceil(nSpeed):Math.floor(nSpeed); 7 css(ele,attr,cur+nSpeed); 8 if(nSpeed===0){ 9 clearInterval(ele[attr+"timer"]); 10 ele[attr+"timer"]=null; 11 if(typeof fnCallback=="function"){ 12 fnCallback.call(ele); 13 //用call去执行fnCallback，则可以让fnCallback在运行的时候，里面的this关键字指向当前运动的这个元素 14 } 15 //ele.style.backgroundColor="green"; 16 } 17 } 18 ele[attr+"timer"]=window.setInterval(_move,20); 19 } 20 21 function css(ele,attr,val){//如果传两个参数，则是取值。三个参数，则赋值 22 if(typeof val=="undefined"){ 23 try{ 24 return parseFloat(window.getComputedStyle(ele,null)[attr]); 25 }catch(e){ 26 return parseFloat(ele.currentStyle[attr]); 27 } 28 }else if(typeof val=="number"){ 29 if(attr=="opacity"){ 30 ele.style.opacity=val; 31 ele.style.filter="alpha(opacity="+val*100+")"; 32 }else{ 33 ele.style[attr]=val+"px"; 34 } 35 } 36 }