纯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">&lt </span>
<span  id="n" class="next">&gt </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>

效果图：