<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播</title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
list-style: none;
vertical-align: baseline;
}
img{
display: block;
float: left;
}
#container{
position: relative;
width: 500px;
overflow: hidden;
height: 375px;
margin: 0 auto;
}
#list{
position: absolute;
z-index: 1;
width: 3500px;
}
#list img{
width: 500px;
}
#prev,#next,#buttons{
position: absolute;
z-index: 2;
}
#buttons{
left: 190px;
bottom: 20px;
}
#buttons a{
display: block;
float: left;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 10px;
margin: 2px;
}
#buttons a.on{
background-color: #000;
}
#prev,#next{
background-color: rgba(0,0,0,0.3);
width: 80px;
height: 80px;
top: 150px;
display: none;
}
#prev:hover,#next:hover{
background-color: rgba(0,0,0,0.7);
cursor: pointer;
}
#next{
right: 0;
}
#prev span,#next span{
display: block;
border: 1px solid #fff;
border-left: none;
border-bottom: none;
width: 50px;
height: 50px;
transform:rotate(45deg);
margin-top: 15px;
}
#container:hover #next,#container:hover #prev{
display: block;
}
#prev span{
transform:rotate(-135deg);
margin-left: 25px;
}
</style>
</style>
<script>
window.onload=function(){
var container=document.getElementById('container');
var list=document.getElementById('list');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
var buttons=document.getElementById('buttons').getElementsByTagName('a');
var index=1;
var timer=setInterval(function(){
next.onclick();
},2000);
var moved=false;
function move(offset){
moved=true;
var newleft=parseInt(list.style.left)+offset;
var time=300;
var interval=30;
var speed=offset/(time/interval);
function go(){
if((speed<0&&newleft>list.style.left)||(speed>0&&newleft<list.style.left)){
parseInt(list.style.left)+speed+'px';
setTimeout=(go,interva);
}else{
moved=false;
list.style.left=newleft+'px';
if(newleft<-2500){
list.style.left=-500+'px';
}
if(newleft>-500){
list.style.left=-2500+'px';
}
}
}
go();
}
function showbutton(){
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=='on'){
buttons[i].className='';
break;
}
}
buttons[index-1].className='on';
}
next.onclick=function(){
if(!moved){
move(-500);
if(index==5){
index=1;
}else{
index+=1;
}
showbutton();
}
}
prev.onclick=function(){
if(!moved){
move(500);
if(index==1){
index=5;
}else{
index-=1;
}
showbutton();
}
}
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=function(){
if(this.className=='on'){
return;
}
var newindex=this.getAttribute('index');
var offset=(newindex-index)*(-500);
if(!moved){
move(offset);
index=parseInt(newindex);
showbutton();
}
}
}
container.onmouseover=function(){
clearInterval(timer);
}
container.onmouseout=function(){
timer=setInterval(function(){
next.onclick();
},2000);
}
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left:-500px">
<img src="img/5.jpg">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/1.jpg">
</div>
<div id="prev"><span></span></div>
<div id="next"><span></span></div>
<div id="buttons">
<a index="1" href="javascript:;" class="on"></a>
<a index="2" href="javascript:;"></a>
<a index="3" href="javascript:;"></a>
<a index="4" href="javascript:;"></a>
<a index="5" href="javascript:;"></a>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号