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实现图片无缝滚动

标签：

原文地址：http://www.cnblogs.com/xiaoxiaoheiheia/p/5825863.html