<!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>
#con{
width:500px;
height:300px;
border: 2px solid black;
position: relative;
margin: 50px auto;
box-shadow: 0 0 4px 4px black;
overflow: hidden;
}
img{
width:500px;
height:300px;
position: absolute
}
</style>
</head>
<body>
<div id="con">
<img src="https://tse1-mm.cn.bing.net/th?id=OET.71b0812157ea47eabfe923e2c4394f64&w=272&h=272&c=7&rs=1&o=5&pid=1.9" alt="">
<img src="https://tse1-mm.cn.bing.net/th?id=OET.3556ae0f2f4940ffb4172c8f6306e14c&w=272&h=135&c=7&rs=1&o=5&pid=1.9" alt="">
<img src="https://tse1-mm.cn.bing.net/th?id=OET.1c59b64eafc34548b5cfb03bfb8c8ced&w=272&h=135&c=7&rs=1&o=5&pid=1.9" alt="">
<img src="https://tse1-mm.cn.bing.net/th?id=OET.a470307823644421b2a9b5cb1c4b01d4&w=272&h=135&c=7&rs=1&o=5&pid=1.9" alt="">
</div>
<script>
let imgs=document.getElementsByTagName("img");
let leftNum,stopTime;
window.onload=function(){
for(let i=0;i<imgs.length;i++){
imgs[i].style.left=i*500+"px";
}
}
let imgMove=function(){
for(let i=0;i<imgs.length;i++){
leftNum=parseInt(imgs[i].style.left);
if(leftNum==-499){
imgs[i].style.left=(imgs.length-1)*500+"px";
clearInterval(stopTime);
setTimeout(moveStart,2500)
}else{
imgs[i].style.left=leftNum-1+"px";
}
}
}
let moveStart=function(){
stopTime=setInterval(imgMove,1)
}
moveStart();
</script>
</body>
</html>