Js封装焦点轮换图

http://jsfiddle.net/dtdxrk/a6eXP/embedded/result/
封装了方法所以浏览器通过测试
调用方法
/*
var focus = new focusBox("focus_pic", {
v : 0,//幻灯片滚动方向 0=左右 1=垂直
width : 530,
height : 180,
btnId : "focus_btn",//按钮ID
on : 1,//鼠标事件触发 0=onmouseover 1=onclick
autoTime : 2000 //播放间隔
});
*/
  1 <!DOCTYPE HTML>
  2  <html lang="en">
  3  <head>
  4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5  <title>原生Js封装焦点轮换图</title>
  6  <style type="text/css">
  7     #focusBox{ width:530px; height:180px;  position:relative; margin:0 auto; zoom:1; overflow:hidden;}
  8     #focusBox img{border:none; margin:0;padding:0;}
  9     #focusBox ul { list-style:none; padding:0; margin:0; position: absolute;}
 10     #focusBox #focus_pic li{ height:180px; width:530px; margin:0; padding:0; float:left}
 11     #focusBox #focus_btn { right:5px; bottom:5px; z-index:2;}
 12     #focusBox #focus_btn li{ float:left;border-radius:20px; font-size:12px; width:25px; height:25px; line-height:25px; font-weight:bold; text-align:center; background:#fff; color:#000; margin-right:2px; cursor:pointer;}
 13     #focusBox #focus_btn li.active{ background:#f60; color:#fff;}
 14  </style>
 15  
 16  <body>
 17 
 18  <div id="focusBox" >
 19    <ul id="focus_pic" style="top:0;left:0;">
 20        <li><a target="_blank" href="#"><img src="1.jpg" width="530" height="180"></a></li>
 21        <li><a target="_blank" href="#"><img src="2.jpg" width="530" height="180"></a></li>
 22        <li><a target="_blank" href="#"><img src="3.jpg" width="530" height="180"></a></li>
 23        <li><a target="_blank" href="#"><img src="4.jpg" width="530" height="180"></a></li>
 24        <li><a target="_blank" href="#"><img src="5.jpg" width="530" height="180"></a></li>
 25    </ul>
 26  </div>
 27  
 28 
 29 <script type="text/javascript">
 30 /*
 31     var focus = new focusBox("focus_pic", {
 32         v : 0,//幻灯片滚动方向 0=左右 1=垂直 
 33         width : 530,
 34         height : 180,   
 35         btnId : "focus_btn",//按钮ID
 36         on : 1,//鼠标事件触发 0=onmouseover 1=onclick
 37         autoTime : 2000 //播放间隔
 38     });
 39 */
 40     function focusBox(id,oo){
 41         this.$ = function(id){return document.getElementById(id)};
 42         this.id = id;
 43         this.oo = oo;//oo.v, oo.width, oo.height, oo.btnId, oo.on, oo.autoTime
 44         this.index = 0;
 45         return this.init();
 46     }
 47 
 48     focusBox.prototype = {
 49         init : function(){//初始化设置
 50             this.picLis = this.$(this.id).getElementsByTagName("li");//图片lis
 51             this.createBtn(this.oo.btnId);//创建数字按钮
 52             this.btnLis = this.$(this.oo.btnId).getElementsByTagName("li");//按钮lis
 53             this.oo.v==0 ? this.$(this.id).style.width = this.oo.width*this.btnLis.length + "px" : this.$(this.id).style.width = this.oo.width +"px";//判断滚动方向 修改ul的宽度
 54             this.btnHover();
 55             this.autoPlay();
 56         },
 57         autoPlay : function(){//定时器
 58             this.moveIndex(this.index);
 59             for(var i=0; i<this.btnLis.length; i++){
 60                 this.btnLis[i].className = "";//清除按钮的样式
 61             }
 62             this.btnLis[this.index].className = "active";
 63         },
 64         moveIndex : function(index){//移动index
 65             clearInterval(this.autoTimer);//清楚定时
 66             var posx = this.oo.v==0 ? -this.index*this.oo.width : 0,
 67                 posy = this.oo.v==1 ? -this.index*this.oo.height : 0,
 68                 that = this;
 69             this.Timer = setInterval(function(){that.moveTo(posx, posy)}, 10);
 70         },
 71         moveTo : function(posx, posy){//移动坐标
 72             var left = parseInt(this.$(this.id).style.left),
 73                 top = parseInt(this.$(this.id).style.top);
 74 
 75             left = left>posx ? left-Math.ceil((left-posx)/10) : left+Math.ceil((posx-left)/10);//当目标位置大于当前位置的时候，一次移动LEFT坐标
 76             top = top>posy ? top-Math.ceil((top-posy)/10) : top+Math.ceil((posy-top)/10);
 77 
 78             this.$(this.id).style.top = top + "px";
 79             this.$(this.id).style.left = left + "px";
 80 
 81             if(left==posx && top==posy){
 82                 clearInterval(this.Timer);
 83                 this.index++;
 84                 if(this.index == this.btnLis.length) this.index = 0;
 85                 var that = this;
 86                 this.autoTimer = setTimeout(function(){that.autoPlay()}, this.oo.autoTime);
 87             }
 88         },
 89         createBtn : function(id){//创建按钮
 90             var ul = document.createElement("ul");
 91                 ul.id = id;
 92             for(var i=0; i<this.picLis.length; i++){        
 93                  var li = document.createElement("li");
 94                  if(i==0){
 95                     li.className = "active";
 96                  }
 97                  li.innerHTML = i+1;
 98                  ul.appendChild(li);
 99             };
100             this.$(this.id).parentNode.appendChild(ul);//添加到父div下
101         },
102         btnHover : function(){//按钮添加事件
103             for(var i = 0; i <this.btnLis.length; i++) {
104                 this.btnLis[i].index = i;
105                 var that = this;
106                 if(this.oo.on == 0){
107                     this.btnLis[i].onmouseover = function(){
108                         clearInterval(that.autoTimer);
109                         clearInterval(that.Timer);
110                         that.index=this.index;
111                         that.autoPlay();
112                     }
113                 }else{
114                     this.btnLis[i].onclick = function(){
115                         clearInterval(that.autoTimer);
116                         clearInterval(that.Timer);
117                         that.index=this.index;
118                         that.autoPlay();
119                     }
120                 };
121             };
122 
123         }
124 
125     }
126 </script>
127 
128 <script type="text/javascript">
129     var focus = new focusBox("focus_pic"/*包裹图片UL的ID*/, {
130         v : 0,//幻灯片滚动方向 0=左右 1=垂直 
131         width : 530,
132         height : 180,   
133         btnId : "focus_btn",//按钮ID
134         on : 1,//鼠标事件触发 0=onmouseover 1=onclick
135         autoTime : 2000 //播放间隔
136     });
137 </script>
138  
139  </body>
140  </html>