js原生代码无缝向左滚动效果（转载）

我们来看下无缝滚动的原理如下图

id="a"（以下简称a，id="b"简称为b）为轮播的可视部分，b为轮播部分，b_1为轮播内容，但b_2和b_1要在同一行上，因为轮播的原理就是利用scrollLeft不断累加的方式实现,当b_2滚动完的时候,从b_1开始继续滚动。

<script type="text/javascript" language="javascript">
     //代码开始

    var x=document.getElementById("a");
     //自定义变量x，getElementById是通过id获取对象。你可以理解为：将document.getElementById("a")
     //这段代码缩写为x了。这里的x你可以随便换。在这里不定义x也行不过后面的代码会麻烦点。
    var y=document.getElementById("b_1");
    var z=document.getElementById("b_2");
    z.innerHTML=y.innerHTML;
    function test() {
        //自定义函数test，test可以随便换，值为空。
        if (x.scrollLeft>=z.offsetWidth){
         //如果，x的scrollLeft值大于等于z的offsetWidth。
         //scrollLeft的值也就是scrollbar移动的值，
         
         //offsetWidth是对象可视宽度。也就是z包括边框在内的宽度，因为y和z的宽度是一样的
         //所以，你这里可以把z改成y，或者直接改成z的宽度效果是一样的

            x.scrollLeft=0;
            //x的scrollLeft值等于x的scrollLeft值减去y的offsetWidth值。
            //其实当y完全滚动完成的时候，x的scrollLeft值和y的offsetWidth值是相等的。
            //所以这段代码意思就是x.scrollLeft=0 。
            //这里y.offsetWidth你可以换成z.offserWidth或者y的宽度值,如果换成零,去掉减号。
            //看到这里你也许会有点明白了吧?无缝滚动,其实就是不断重复滚动第一个层.
            //当b_1滚动的时候,如果没有"双胞胎"的b_2,滚动的时候将显示一个b_1宽的空白
            //所以,如果没有overflow：hidden属性的话，滚动跟下面这张图是一样的
        }else{
        //否则
            x.scrollLeft++;
            //x的scrollLeft值累加，实现移动
        }
    }

最后设置鼠标放上去停止，鼠标移开继续

 

 var run = setInterval(test,10);
    //自定义run，setInter是在规定的时间内重复调用函数，直到用clearInterval终止
    //这句代码的意思是，每1毫秒执行一次test，每隔1毫秒x的scrollLeft值加1
    //所以数值越大滚动越慢
    
    x.onmouseover=function() {clearInterval(run)};
    //当鼠标划过x的时候，终止run。滚动停止

    x.onmouseout=function() {run=setInterval(test,10)};
    //当鼠标离开x，继续执行test，时间为1毫秒。
</script>