电商网站必备 简单版轮播图库

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();
}