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

图片无缝滚动的轮播主要利用滚动轴–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)

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