var Scoll=(function(auto_load){
var util={
$:function(node){
return typeof node =="string" ? document.getElementById(node) : node;
},
$$:function(node,name){
var elem=node.getElementsByTagName("*"),
arr=[],
reg=new RegExp("\\b"+name+"\\b","i"),
i;
for(i=0;i<elem.length;i++){
if(elem[i].className.search(reg)!=-1){
arr.push(elem[i]);
}
}
return arr;
}
}
return {
init:function(){
auto_load.addEventListener("load",function(){
var oUl=util.$("demo"),
oLi=oUl.getElementsByTagName("li"),
len=oLi.length,
oliW=oLi[0].offsetWidth,
prevBtn=util.$("prev"),
nextBtn=util.$("next"),
current=1;
oUl.style.width=len*(oliW+20)+"px";
timer=setInterval(function(){
showImg(current);
current++;
if(current==len){
current=0;
}
},1000)
prevBtn.addEventListener("click",function(){
clearInterval(timer);
current-=1;
if(current==-1){
current=len-1;
}
showImg(current);
},false);
nextBtn.addEventListener("click",function(){
clearInterval(timer);
current+=1;
if(current==len){
current=0;
}
showImg(current);
},false);
function showImg(current){
var nowLeft=-current*(oliW+20)
oUl.style.left=nowLeft+"px";
}
},false)
}
}
})(window)
Scoll.init();
小布局：
<!doctype html> <html> <head> <title></title> <style type="text/css"> ul,li,img{padding: 0;margin: 0;} #container{position:relative;width: 220px;margin: 0 auto;overflow: hidden; } ul#demo{position: relative;overflow: hidden;} ul#demo li{float: left;display: block;list-style: none; margin-right: 20px;border: solid 5px #333;border-radius: 5px;box-shadow: 5px 5px 5px black;} ul#demo li img{width: 200px;height: 300px;} #prev{left: 100px;} #prev, #next{ width: 100px;height: 100px; display: block;position:absolute;background: black;color: white;line-height: 100px;text-align: center;font-size: 30px;cursor: pointer;top: 100px;} #next{ right: 100px;} </style> <script type="text/javascript" src="demo.js"></script> </head> <body style="postion:relative;"> <div id="container"> <ul id="demo" class="demo"> <li><img src="1.jpg"></li> <li><img src="2.jpg"></li> <li><img src="3.jpg"></li> <li><img src="4.jpg"></li> <li><img src="5.jpg"></li> <li><img src="6.jpg"></li> </ul> </div> <span id="prev">PREV</span> <span id="next">NEXT</span> </body> </html>
代码有待改善 凑合着用吧