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

　　

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