*{
padding: 0;
margin: 0;
}
.box{
width: 520px;
height: 280px;
margin: 40px auto ;
position: relative;
}
.out{
width: 100%;
height: 100%;
overflow: hidden;
}
.in{
width: 2600px;
height: 280px;
}
.in>img{
width: 520px;
height: 280px;
float: left;
}
ul{
list-style: none;
position: absolute;
bottom: 10px;
left: 0;
}
li{
width: 30px;
height: 8px;
background-color: rgb(118, 115, 115);
float: left;
margin-left: 60px;
}
.ac{
background-color: rgb(186, 223, 254);
}
<div class="box">
<div class="out">
<div class="in">
<img src="./img/per_1.jpg" alt="">
<img src="./img/per_2.jpg" alt="">
<img src="./img/per_3.jpg" alt="">
<img src="./img/per_4.jpg" alt="">
<img src="./img/per_5.jpg" alt="">
</div>
<ul>
<li class="ac"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
var img_=document.getElementsByTagName('img');
var out_=document.getElementsByClassName('out')[0];
var index=0;
var li_=document.getElementsByTagName('li');
var timer=null;
var timer1=null;
function autoMove(){
timer=setInterval(function(){
index++;
if(index>=img_.length){
index=0;
}
var maxStep=20;
var start=out_.scrollLeft;
var end=img_[0].offsetWidth*index;
var everyStep=(end-start)/maxStep;
var step=0;
timer1=setInterval(function(){
step++;
if(step>=maxStep){
step=0;
clearInterval(timer1);
}
out_.scrollLeft +=everyStep;
},20)
for(var i=0;i<li_.length;i++){
li_[i].className='';
}
li_[index].className='ac';
li_[index].onclick=function(){
clearInterval(timer);
}
li_[index].ondblclick=function(){
autoMove();
}
},2000)
}
autoMove();