<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>
效果图：
