js實現圖片無縫滾動

標籤：

html部分，css樣式自己腦補一下畫面吧，效果如下，無縫滾動

<div class="box" id="box">
    <ul>
        <li><img src="images/01.jpg" alt=""></li>
        <li><img src="images/02.jpg" alt=""></li>
        <li><img src="images/03.jpg" alt=""></li>
        <li><img src="images/01.jpg" alt=""></li>
        <li><img src="images/02.jpg" alt=""></li>
        <li><img src="images/03.jpg" alt=""></li>
    </ul>
</div>

js部分：
var scroll = document.getElementById("box");
    var ul = scroll.children[0];
    var num = 0; //控制左側值  left
    var timer = null;  // 定時器
    timer = setInterval(autoPlay,20);
    function autoPlay() {
        num--;
        //console.log(num);   //輸出的是所有的滾動的往左邊移動的數
        num<=-1200 ? num = 0 : num;
        ul.style.left = num + "px";
    }
    scroll.onmouseover = function() {  // 滑鼠經過大盒子  停止定時器
        clearInterval(timer);
    }
    scroll.onmouseout = function() {
        timer = setInterval(autoPlay,20);  // 開啟定時器
    }

自己這段時間開始整理的基礎知識，如有錯誤歡迎指正

js實現圖片無縫滾動