原生js-焦点图轮播

浏览数：43 / 时间：2015年06月09日

首先是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 }