html部分
<div id="container">
<div id="list" style="left: 0">
<img src="images/list2.png" alt="2">
<img src="images/list3.png" alt="3">
<img src="images/list4.png" alt="4">
<img src="images/list5.png" alt="5">
<img src="images/list1.png" alt="1">
</div>
</div>
css部分
/*包裹轮播图的div*/
#container{
width: 800px;
height:440px;
overflow: hidden;
display: inline-block;
position: relative;
}
/*轮播图*/
#list{
width: 4000px;
height:440px;
position: absolute;
background-color: red;
}
#list img{
float: left;
}
js部分
window.onload = function () {
var list = document.getElementById('list');
var container = document.getElementById('container');
//每隔三秒切换海报图片
function animate() {
var newLeft = parseInt(list.style.left);
if (newLeft < -2400) {
list.style.left = 0;
} else {
list.style.left = newLeft - 800 + 'px';
}
setTimeout(animate, 3000);
}
animate();
}