原生JS简单实现图片无缝滚动

最新推荐文章于 2024-03-28 22:39:07 发布

nrskhdzl

最新推荐文章于 2024-03-28 22:39:07 发布

阅读量292

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/nrskhdzl/article/details/99722139

本文详细介绍了一种基于HTML、CSS和JavaScript实现的图片无缝滚动轮播效果。通过设置滚动轴-x，配合特定的HTML结构和CSS样式，辅以简单的JS逻辑，实现了流畅的图片轮播展示。

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

图片无缝滚动的轮播主要利用滚动轴–x来实现，首先是HTML部分的实现

<div id="d1">
    <div id="d2">
        <div id="d3">
            <img src="./0118练习/img/111.jpg" alt=""/>
            <img src="./0118练习/img/222.jpg" alt=""/>
            <img src="./0118练习/img/333.jpg" alt=""/>
            <img src="./0118练习/img/444.jpg" alt=""/>
            <img src="./0118练习/img/555.jpg" alt=""/>
            <img src="./0118练习/img/666.jpg" alt=""/>
            <img src="./0118练习/img/777.jpg" alt=""/>
            <img src="./0118练习/img/888.jpg" alt=""/>
        </div>
        <div id="d4"></div>
    </div>
</div>

再是CSS部分的实现

*{
            margin: 0;
        }
        #d1{
            width: 1200px;
            height: 200px;
            overflow-x: scroll;
        }
        #d2{
            width: 4800px;
            height: 200px;
        }
        #d3,#d4{
            width: 2400px;
            height: 200px;
            float: left;
        }
        #d3>img,#d4>img{
            position: relative;
            width: 300px;
            height: 100%;
            float: left;
        }

最后是js 部分的实现

var d1=document.getElementById("d1");
    var d3=document.getElementById("d3");
    var d4=document.getElementById("d4");
    var speed=2;
    var time=setInterval(function(){
        if(d1.scrollLeft==0){
            d1.scrollLeft=2400;
        }
        d4.innerHTML=d3.innerHTML;
        var scroll=d1.scrollLeft;
        scroll-=speed;
        d1.scrollLeft=scroll;
    },10)

这种无缝滚动比较简单，结束