<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
.box{
520px;
height: 280px;
border:1px solid red;
margin:100px auto 0;
position: relative;
/* overflow: hidden; */
}
.box ul{
/* 2600px;
3120px; */
/* 因为将来要移动ul，所以需要定位 */
position: relative;
}
.box ul li{
position: absolute;
left:0;
top:0;
display: none;
}
.box .active{
display: block;
}
.box ol{
position: absolute;
left:50%;
bottom:10px;
/* background-color: red; */
margin-left: -100px;
}
.box ol li{
20px;
height: 20px;
border-radius: 50%;
background-color:orange;
float: left;
margin:5px 10px;
cursor: pointer;
}
.box .current{
background-color: #fff;
}
.box span{
40px;
height:60px;
background-color:rgba(0,255,0,0.6);
position: absolute;
top:50%;
margin-top: -30px;
cursor: pointer;
}
.box .arrow-l{
left:0;
}
.box .arrow-r{
right:0;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
$(function(){
var imgCount=0;
$('#arrowRight').click(function(){
imgCount++;
if(imgCount>4){
imgCount=0;
}
changeImg(imgCount);
});
$('#arrowLeft').click(function(){
imgCount--;
if(imgCount<0){
imgCount=4;
}
changeImg(imgCount);
});
var timer = setInterval(function(){
$('#arrowRight').click();
},2000);
$('.box').hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function(){
$('#arrowRight').click();
},2000);
});
function changeImg(num){
$('#imgBox li').eq(num).stop().fadeIn().siblings().stop().fadeOut()
$('#dianBox li').eq(num).addClass('current').siblings().removeClass('current');
}
});
</script>
</head>
<body>
<div class="box">
<ul id="imgBox">
<li class="active"><img src="images/banner1.jpg" alt=""></li>
<li><img src="images/banner2.jpg" alt=""></li>
<li><img src="images/banner3.jpg" alt=""></li>
<li><img src="images/banner4.jpg" alt=""></li>
<li><img src="images/banner5.jpg" alt=""></li>
</ul>
<ol id="dianBox">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<span class="arrow-l" id="arrowLeft"></span>
<span class="arrow-r" id="arrowRight"></span>
</div>
</body>
</html>