<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#big{
width: 700px;
height: 420px;
overflow: hidden;
position: relative;
}
#container{
width: 100%;
height: 100%;
position: absolute;
left: -700px;
white-space: nowrap;/* 不换行显示 */

}
.item{
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
display: inline-block;
margin: -2px;
}
</style>
</head>
<body>
<div id="big">
<div id="container">
<div class="item" style="background-image: url(./img/4.jpg)"></div>
<div class="item" style="background-image: url(./img/1.jpg)"></div>
<div class="item" style="background-image: url(./img/2.jpg)"></div>
<div class="item" style="background-image: url(./img/3.jpg)"></div>
<div class="item" style="background-image: url(./img/4.jpg)"></div>
<div class="item" style="background-image: url(./img/1.jpg)"></div>

</div>
</div>


<script>
// 第一次显示 1*700px 第二次移动2*width
var big = document.getElementById("big");
var container = document.getElementById("container");
var length = container.children.length-2;
var index = 1;//索引
run=()=>{
var myInterval = setInterval(()=>{
if(index==length+1){
// container.clientWidth
container.style.left = -index*big.clientWidth+"px";
container.style.transition="left 1s";
clearInterval(myInterval);
setTimeout(()=>{
index =1;
container.style.left = -big.clientWidth+"px";
container.style.transition="left 0s";
console.log(index);
},1000);
run();
}else{
index++;
container.style.left = -index*big.clientWidth+"px";
container.style.transition="left 1s";
}
},2000);
}

run();
</script>
</body>
</html>