JS无线轮播 跑马灯效果

思路： 1.在原有的span标签后面复制一个span标签
2.设置box的卷曲值 达到 span、内容向左 滚动的效果
3. 在第一个span 向左移动 box的卷曲值达到 box的宽度时 ，再将box盒子的卷曲值 重新设为0

效果图：

静态结构 如下：

<div id="box">
    <span id="sp">
        <a href=""><img src="images/slidepic1.jpg" alt=""></a>
        <img src="images/slidepic2.jpg" alt="">
        <img src="images/slidepic3.jpg" alt="">
        <img src="images/slidepic4.jpg" alt="">
        <img src="images/slidepic5.jpg" alt="">
    </span>
</div>

js代码如下：

<script>

    var box = $myId("box");
    var span = $myId("sp");
    var spanW = span.offsetWidth;
    console.log(spanW);
    //克隆一个span
    var newSpan = span.cloneNode(true);
    // 在box尾部插入克隆的span
    box.appendChild(newSpan);
    // box.scrollLeft = 300px;


    // 自动 向左卷曲
    function zidong() {
        if( box.scrollLeft > spanW ){
            box.scrollLeft = 0;
        }else{
            box.scrollLeft++
        }
        // console.log(box.scrollLeft);
    }
// 定义 定时器
    var dsq = setInterval(zidong,1);

    //鼠标移入时 清除定时器
    box.onmouseover = function () {
        clearInterval(dsq);
    }
    //鼠标移出时  从新启动定时器  还是以相同的间隔时间 和方法启动定时器
    box.onmouseout = function () {
        dsq = setInterval(zidong,1);
    }
</script>

思路： 1.在原有的span标签后面复制一个span标签
2.设置box的卷曲值 达到 span、内容向左 滚动的效果
3. 在第一个span 向左移动 box的卷曲值达到 box的宽度时 ，再将box盒子的卷曲值 重新设为0