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>