<!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></title>
<link rel = 'stylesheet' href = '轮播图.css'/>
</head>
<body>
<div class = 'container'>
<div class = 'wrap' >
<img src = 'img/1.jpg'/>
<img src = 'img/2.jpg'/>
<img src = 'img/3.jpg'/>
<img src = 'img/4.jpg'/>
</div>
</div>
<script src = '轮播图.js'></script>
</body>
</html>
*{
padding:0;
margin:0;
}
.container{
position:relative;
width:400px;
height:300px;
margin:0 auto;
overflow:hidden;
}
.wrap{
position:absolute;
width:1600px;
height:300px;
}
.wrap img{
float:left;
width:400px;
height:300px;
}
var wrap = document.getElementsByTagName('div')[1];
wrap.style.left = 0 + 'px';
setInterval(function (){
if(parseInt(wrap.style.left) <= -1200){
wrap.style.left = 400 + 'px';
}
wrap.style.left = parseInt(wrap.style.left) + -400 + 'px';
}, 1000);