<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
font-size: 16px;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
#banner{
width: 830px;
height: 482px;
margin: 100px auto;
position: relative;
}
#banner li{
/* display: none; */
opacity: 0;
position: absolute;
left: 0;
top: 0;
transition: .5s;
}
#banner li.active{
/* display: block; */
opacity: 1;
}
.leftBtn, .rightBtn{
width: 30px;
height: 64px;
position: absolute;
top: 50%;
margin-top: -32px;
background-image: url(images/index.png);
cursor: pointer;
display: none;
}
.leftBtn{
left: 20px;
background-position: -82px -145px;
}
.leftBtn:hover{
background-position: -161px -145px;
}
.rightBtn{
right: 20px;
background-position: -120px -145px;
}
.rightBtn:hover{
background-position: -198px -145px;
}
.circle{
width: 100%;
position: absolute;
bottom: 20px;
text-align: center;
font-size: 0;
}
.circle span{
display: inline-block;
width: 20px;
height: 20px;
background: #fff;
background: url(images/index.png) -26px -100px;
cursor: pointer;
margin: 0 5px;
}
.circle span.active{
background: url(images/index.png) 0 -100px;
}
</style>
</head>
<body>
<div id="banner">
<ul class="img">
<li class="active"><a href="#"><img src="images/01.png" alt=""></a></li>
<li><a href="#"><img src="images/02.png" alt=""></a></li>
<li><a href="#"><img src="images/03.png" alt=""></a></li>
<li><a href="#"><img src="images/04.png" alt=""></a></li>
<li><a href="#"><img src="images/05.png" alt=""></a></li>
<li><a href="#"><img src="images/06.png" alt=""></a></li>
<li><a href="#"><img src="images/07.png" alt=""></a></li>
<li><a href="#"><img src="images/08.png" alt=""></a></li>
</ul>
<div class="leftBtn"></div>
<div class="rightBtn"></div>
<div class="circle">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
var banner=document.querySelector('#banner');
var lis=document.querySelectorAll('#banner li');
var spans=document.querySelectorAll('.circle span');
var leftBtn=document.querySelector('.leftBtn');
var rightBtn=document.querySelector('.rightBtn');
var cn=0; //当前次点击对应的索引
var ln=0; //上一次选中的图片对应的索引
for(var i=0;i<spans.length;i++){
spans[i].index=i;
spans[i].onclick=function(){
cn=this.index;
/* //console.log(this.index);
lis[ln].className='';
lis[cn].className='active';
spans[ln].className='';
spans[cn].className='active';
//lis[ln].className=spans[ln].className='';
//lis[cn].className=spans[cn].className='active';
ln=cn; //当前次点击的索引相对于下一次点击来说就是上一次的索引 */
change();
};
}
function change(){
lis[ln].className=spans[ln].className='';
lis[cn].className=spans[cn].className='active';
ln=cn;
}
leftBtn.onclick=function(){
cn--;
if(cn<0){
cn=lis.length-1;
}
change();
};
rightBtn.onclick=function(){
cn++;
if(cn>lis.length-1){
cn=0;
}
change();
};
var timer=setInterval(rightBtn.onclick,2000);
banner.onmouseover=function(){
leftBtn.style.display=rightBtn.style.display="block";
clearInterval(timer);
};
banner.onmouseout=function(){
leftBtn.style.display=rightBtn.style.display="none";
timer=setInterval(rightBtn.onclick,2000);
};
</script>
</body>
<html>