<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播</title>
<style type="text/css">
#box{width: 590px;height: 470px;margin:50px auto;position: relative;}
#content div{display: none}
#content div.sel{display: block;}
#box-arrow{position: absolute;top:50%;transform: translateY(-50%);width: 100%}
#box-arrow .arrow{width: 26px;height: 26px;background: rgba(0,0,0,0.5);padding: 2px;}
#box-arrow .al{float: left;}
#box-arrow .ar{float: right;}
#box .cus{position: absolute;bottom:15px;left: 50%;transform: translateX(-50%);}
#box .cus li{list-style-type: none;width: 10px;height: 10px;border: 1px solid #fff;border-radius: 50%;float: left;margin-right: 10px;}
#box .cus li.current{background: #fff}
</style>
</head>
<body>
<div id="box">
<div id="content">
<div class="sel"><img src="images/l1.jpg"></div>
<div><img src="images/l2.jpg"></div>
<div><img src="images/l3.jpg"></div>
<div><img src="images/l4.jpg"></div>
</div>
<div id="box-arrow">
<img class="arrow al" src="images/arrow-left.png">
<img class="arrow ar" src="images/arrow-right.png">
</div>
<ul class="cus">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
//1.自动轮播
var ds=document.getElementById('content').getElementsByTagName('div');
var index=0;
var len=ds.length;
var t;
var o=document.getElementById('box');
var arrows=document.getElementsByClassName('arrow');
t=setInterval(moveNext,1000);
//显示下一张
function moveNext(){
//当前显示的置为不显示
ds[index].className='';
lis[index].className='';
index++;//索引增加
if (index==len) {
index=0;
}
//下一张显示
ds[index].className='sel';
lis[index].className='current';
}
function movePre(){
//当前显示的置为不显示
ds[index].className='';
lis[index].className='';
index--;//索引增加
if (index==-1) {
index=len-1;
}
//下一张显示
ds[index].className='sel';
lis[index].className='current';
}
//2.鼠标进入,停止轮播
o.onmouseenter=function(){
this.style.cursor="pointer";
clearInterval(t);
}
//3.鼠标离开,继续轮播
o.onmouseleave=function(){
t=setInterval(moveNext,1000);
}
//4.箭头轮播
for(var i=0;i<arrows.length;i++){
arrows[i].onmouseenter=function(){
this.style.background='rgba(0,0,0,0.6)';
}
arrows[i].onmouseleave=function(){
this.style.background='rgba(0,0,0,0.5)';
}
}
//左箭头
arrows[0].onclick=function(){
movePre();
};
//右箭头
arrows[1].onclick=function(){
moveNext();
};
//5.指示器
var lis=document.getElementsByClassName('cus')[0].getElementsByTagName('li');
//为指示器添加点击事件
for(var j=0;j<len;j++){
lis[j]._index=j;
lis[j].onclick=function(){
lis[index].className='';
ds[index].className='';
// console.log(index);
this.className='current';
ds[this._index].className='sel';
index=this._index;//修改index的值
}
}
</script>
</body>
</html>