<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>