javascript實現圖片無縫滾動

學習中的記錄，為了就是把復習當天學習的內容，不廢話了，先看結構：

　　為什么最后一個需要放入一個重復的圖片呢？后面js中會講到，圖片路徑可替換成自己的本地圖片

<div class="box" id="screen">
    <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/04.jpg" alt=""/></li>
        <li><img src="images/01.jpg" alt=""/></li>
    </ul>
</div>

　　再把用css稍微修飾一下，不然沒法看，簡單的寫一下css

* {
            margin: 0; padding: 0;
        }

        ul {
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        /*取消圖片底部3像素距離*/
        .box {
            width: 300px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            position: relative;
            /*這里為了看起來明顯一點就先不溢出隱藏了*/
            /*overflow: hidden;*/
        }

        .box ul li {
            float: left;
        }

        .box ul {
            width: 1500px;
            position: absolute;
            left: 0;
            top: 0;
        }    

　　下面就開始寫js，寫js之前我們先把思路理一理，也就是實現的原理是什么？

　　首先需要我們要清楚，所謂的滾動，就是整個ul在box盒子中進行運動，所以我們只需要改變ul的left值就行。用定時器控制每次移動left值。

　　我們用個公式來分析圖片滾動的距離  leader（最終位置） = leader（開始位置） + step（每次滾動的距離）； 這里第一個leader表示最終滾動到的位置，第二個表示ul開始距離的位置，step表示每次需要滾動多少個像素。

　　我們先獲取當前ul的位置，也就是距離左邊的位置 ul.offsetLeft；再設置每次滾動的距離，也就是step，因為left是往負方向移動，所以這兒的step是負值；接下來就是最終的位置leader。

　　然后我們進行判斷，如果最終的位置大於整個ul的寬度減去一個圖片的寬度時，這也就是為什么我們在結構中多放一個第一張圖，最多跑到假的第一張圖片的時候，立刻讓ul回到第一張的位置，然后設置ul滾動的最終位置。

　　否則，我們讓ul的left直接滾動一個step的距離，這樣雖然還會有一點點的抖動，但是不影響最終的用戶體驗。

　　

 //獲取頁面元素
    var screen = document.getElementById("screen");
    var ul = screen.children[0];
    var timer = setInterval(function () {
        //leader = leader +step;
        var leader = ul.offsetLeft;
        var step = -1;
        leader += step;
        //最多跑到假的第一張顯示的時候 ，最多就是ul的寬減去一張圖的寬度
        if (leader > -(ul.offsetWidth - ul.children[0].offsetWidth)) {
            //設置ul的left值，讓ul運動
            ul.style.left = leader + "px";
        } else {
            ul.style.left = step + "px";
        }
    }, 17);

　　

　　菜鳥一枚，多多指教!!!