纯js轮播图
<div id="wrapper"> <div id="container"> <img src="http://images.cnblogs.com/cnblogs_com/rain-null/1027470/o_001.jpg"alt=""/> <img src="http://images.cnblogs.com/cnblogs_com/rain-null/1027470/o_003.jpg" alt=""/> <img src="http://images.cnblogs.com/cnblogs_com/rain-null/1027470/o_04.jpg" alt=""/> <img src="http://images.cnblogs.com/cnblogs_com/rain-null/1027470/o_005.jpg" alt=""/> </div> <span id="p" class="pre">< </span> <span id="n" class="next">> </span> <div class="shows"> <span item="1" class="show"></span> <span item="2"></span> <span item="3"></span> <span item="4"></span> <div> </div> <style> *{margin:0;padding:0} #wrapper{width:400px;height:400px;margin:100px auto;overflow:hidden;position:relative} div#container{width:1600px;height:400px;position:absolute} div#container img{width:400px;height:400px;float:left;} #wrapper>span{cursor:pointer;position:absolute;font-size:40px;z-index:5;top:40%;color:#bdbdbd;font-size:3.6em;} #wrapper span.pre{left:20px;} #wrapper span.next{right:20px;} div.shows{position:absolute;bottom:10px;right:20px;z-index:5;width:200px;height:50px;} div.shows span{width:15px;border:1px solid grey;margin-left:15px;float:left;display:inlin-block;height:15px;border-radius:15px} .show{background:red} </style> <script> window.onload=function(){ var wrapper=document.getElementById("wrapper"); var dis=document.getElementById("container"); var pre=document.getElementById("p"); var next=document.getElementById("n"); var list=document.getElementsByClassName("shows")[0]; var lists=list.getElementsByTagName("span"); var index=1; function animate(offset){ if(!(dis.style.left)){dis.style.left=dis.style.top=0} var x=parseInt(dis.style.left)+offset; dis.style.left=x+"px"; if(x<-1200){dis.style.left=0;} if(x>0){dis.style.left=-1200+"px"}; } function play(){ timer=setInterval(function(){next.onclick();},1500);} play(); wrapper.onmouseover=function(){clearInterval(timer)} wrapper.onmouseout=function(){play()} pre.onclick=function(){ index-=1; if(index<1){index=4;} showitem(); animate(400); } next.onclick=function(){ index+=1; if(index>4){index=1;} showitem(); animate(-400); } function showitem(){ for(var i=0,len=lists.length;i<len;i++) { if(lists[i].className=="show"){lists[i].className=""} } lists[index-1].className="show"; } for(var i=0,len=lists.length;i<len;i++){ lists[i].onclick=function(){ var currentindex=parseInt(this.getAttribute("item")); var offset=400*(index-currentindex); animate(offset); index=currentindex; showitem();} } } </script>
效果图: