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

最新推荐文章于 2025-05-23 11:31:21 发布

原创最新推荐文章于 2025-05-23 11:31:21 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #电商 #库 #css

javascript 同时被 3 个专栏收录

41 篇文章

订阅专栏

html

26 篇文章

订阅专栏

css

21 篇文章

订阅专栏

本文介绍了一个简单的轮播图实现方案，通过HTML、CSS和JavaScript完成图片的自动切换效果。轮播图由一个包裹的div容器和内部的图片列表组成，通过设置定时器每隔三秒切换一次图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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