<html> <head> <meta charset="utf-8" /> <title> lunbo </title>
<style media="screen" type="text/css">
*{ margin:0px; text-decoration:none;}
body{margin-top:50px;}
#container{width:800px; height:300px; position:relative;border:3px solid #333;overflow:hidden; margin:0 auto;}
#list{width:4000px; height:300px; position:absolute; z-index:1;display:inline-block;}
#list img{float:left;}
#buttons{position:absolute; height:10px; width:100px; z-index:2; bottom:20px; left:350px;}
#buttons span{cursor:pointer;/*假超链接样式*/ float:left; border:1px solid #fff; width:10px;height:10px;border-radius:10px; background:#333; margin-right:5px;}
#buttons .on{background:orangered;}
.arrow{cursor:pointer; display:none; line-height:39px; text-align:center; font-size:36px;
font-weight:bold; width:40px; height:40px; position:absolute; z-index:2; top:180px;
background-color: RGBA(0,0,0,.3); color:#fff;}
.arrow:hover{background-color:RGBA(0,0,0,.7);}
#container:hover .arrow{display:block;}
#prev{left:20px;}
#next{right:20px;}
</style>
<script>
window.onload=function(){
var container=document.getElementById('container'); var list=document.getElementById('list'); var buttons=document.getElementById('buttons').getElementsByTagName('span'); var pre=document.getElementById('prev'); var next=document.getElementById('next'); var index=1; var animated=false; var timer; function showButton(){ for(var i=0;i<buttons.length;i++){ if(buttons[i].className=='on'){ buttons[i].className=; break; }
}
buttons[index-1].className="on"; } function animate(offset){ animated=true;
var newleft=parseInt(list.style.left)+offset;
var time=300;//位移总时间
var interval=100;//位移间隔时间
var speed=offset/(time/interval);//每一次的位移量
function go(){
if((speed<0&&parseInt(list.style.left)>newleft)||(speed>0&&parseInt(list.style. left)<newleft)){
list.style.left=parseInt(list.style.left)+speed+'px';
setTimeout(go,interval);
}
else{
animated=false;
list.style.left=newleft+'px';
if(newleft>-800){
list.style.left=-4000+'px';
}
if(newleft<-4000){
list.style.left=-800+'px';
}
}
}
go();
} function play(){ timer=setInterval(function(){ next.onclick(); },4000); } function stop(){ clearInterval(timer); } next.onclick=function(){ if(index==5){ index=1; } else{ index+=1; } showButton(); if(animated==false){ animate(-800); } } pre.onclick=function(){ if(index==1){ index=5; } else{
index-=1;
} showButton(); if(animated==false){
animate(800); }
} for(var i=0;i<buttons.length;i++){ buttons[i].onclick=function(){ if(this.className=='on'){ return;
}
var myIndex=parseInt(this.getAttribute('index')); var offset=-800*(myIndex-index); index=myIndex; showButton();
if(animated==false){
animate(offset);
} } } container.onmouseover=stop; container.onmouseout=play; play();
}
</script>
</head> <body>
<a href="javascript:;" class="arrow" id="prev"><</a> <a href="javascript:;" class="arrow" id="next">></a>
</body> </html>