<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
#container{width: 520px;height: 280px;margin: 50px auto;position: relative;}
#content div{display: none;}
#content div.current{display: block;}
#a1{position: absolute;top: 50%;margin-top: -16px;width: 100%; }
#a1 div{display: none;}
#a1 .arrow{background: rgba(0,0,0,0.3);}
#a1 .arrow:hover{cursor: pointer;}
#a1 .arrow-left{float: left;}
#a1 .arrow-right{float: right;}
ol ,li{list-style: none;}
#cus{position: absolute;bottom: 15px;left: 50%;margin-left: -26px;width: 90px;
background: rgba(255,255,255,0.7);height: 15px;text-align: center;line-height: 15px;
border-radius: 15px;}
#cus li{float: left;width: 10px;height: 10px;border: 1px solid gray;border-radius: 50%;
margin-right: 6px;margin-top: 2px;}
#cus li:first-child{margin-left: 15px;}
#cus li:hover{cursor: pointer;}
#cus li.sel{background: orange;border-color: orange;}
</style>
</head>
<body>
<div id="container">
<!-- 轮播图 -->
<div id="content">
<div class="current"><img src="img/01.jpg" alt=""></div>
<div><img src="img/02.jpg" alt=""></div>
<div><img src="img/03.jpg" alt=""></div>
<div><img src="img/04.jpg" alt=""></div>
</div>
<!-- 指示器 -->
<ol id="cus">
<li class="sel"></li>
<li></li>
<li></li>
<li></li>
</ol>
<!-- 箭头 -->
<div id="a1">
<div class="arrow arrow-left"><img src="img/arrow-left.png" alt=""></div>
<div class="arrow arrow-right"><img src="img/arrow-right.png" alt=""></div>
</div>
</div>
<script type="text/javascript">
var o=document.getElementById('container');//轮播区
var ds=document.getElementById('content').getElementsByTagName('div');
var arrows=document.getElementsByClassName('arrow');
var lis=document.getElementById('cus').getElementsByTagName('li');
var index=0;//保存当前图片的索引
var len=ds.length;//图片的个数
var time;//定时器名字
time=setInterval(move,1000);//启动定时器,开始轮播
//鼠标经过时,停止轮播
o.onmouseover=function(){
clearInterval(time);
arrows[0].style.display='block';
arrows[1].style.display='block';
};
//箭头控制图片
//左箭头
arrows[0].onclick=function(){
moveUp();
};
//右箭头
arrows[1].onclick=function(){
move();
};
//指示器点击事件
for(var i=0;i<lis.length;i++){
lis[i].index1=i;//遍历时为每一个li新增属性index1,并且赋值
lis[i].onclick=function(){
lis[index].className='';//当前显示的指示器样式清空
ds[index].className='';//当前显示的轮播图,不显示
this.className='sel';//修改被点击的指示器
ds[this.index1].className='current';//指示器被选中时对应的轮播图显示
index=this.index1;//修改index1
};
};
//鼠标离开时,继续轮播
o.onmouseout=function(){
time=setInterval(move,1000);
};
//开始切换下一张图片
function move(){
//当前显示的图片,停止显示
ds[index].className='';
lis[index].className='';
index++;//索引递增
if (index==len) {
index=0;//图片为最后一张时,替换为第一张
}
ds[index].className='current';
lis[index].className='sel';
};
//切换为上一张图片
function moveUp(){
//当前显示的图片,停止显示
ds[index].className='';
lis[index].className='';
console.log(index);
index--;//索引递减
if (index==-1) {
index=len-1;//图片为第一张时,替换为最后一张
}
ds[index].className='current';//显示上一张
lis[index].className='sel';
}
</script>
</body>
</html>