首页 > 代码库 > js实现图片无缝滚动

js实现图片无缝滚动

html部分,css样式自己脑补一下画面吧,效果如下,无缝滚动

技术分享

<div class="box" id="box">
<ul>
<li><img src=http://www.mamicode.com/"images/01.jpg" alt=""></li>
<li><img src=http://www.mamicode.com/"images/02.jpg" alt=""></li>
<li><img src=http://www.mamicode.com/"images/03.jpg" alt=""></li>
<li><img src=http://www.mamicode.com/"images/01.jpg" alt=""></li>
<li><img src=http://www.mamicode.com/"images/02.jpg" alt=""></li>
<li><img src=http://www.mamicode.com/"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实现图片无缝滚动