js无缝滚动原理及详解

原文地址：js无缝滚动原理及详解作者：刹那芳华

   刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后,自己写一个滚动效果不会是什么难题了.
   本文以CSS+div+js为例,详细说明无缝滚动实现原理.
   首先建立四个层(div).

    结构如下：






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

   下面介绍一下代码里（代码可以在网上找，也可以用本文的代码。）的各种参数的意思：
   其实每个代码都大同小易
   <script type="text/javascript"language="javascript">
    ##代码开始##

    varx=document.getElementByIdx_x("a");
    ##自定义变量x，getElementById是通过id获取对象。你可以理解为：将document.getElementByIdx_x("a")
    ##这段代码缩写为x了。这里的x你可以随便换。在这里不定义x也行不过后面的代码会麻烦点。

    vary=document.getElementByIdx_x("b_1");
    varz=document.getElementByIdx_x("b_2");
      function test() {
       ##自定义函数test，test可以随便换，值为空。

      if(x.scrollLeft>=z.offsetWidth)
        ##如果，x的scrollLeft值大于等于z的offsetWidth。
        ##scrollLeft的值也就是scrollbar移动的值，
        如图：
          
        ##offsetWidth是对象可视宽度。也就是z包括边框在内的宽度，因为y和z的宽度是一样的
        ##所以，你这里可以把z改成y，或者直接改成z的宽度效果是一样的

         x.scrollLeft-=y.offsetWidth;
           ##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,1);
    ##自定义run，setInter是在规定的时间内重复调用函数，直到用clearInterval终止
   ##这句代码的意思是，每1毫秒执行一次test，每隔1毫秒x的scrollLeft值加1
   ##所以数值越大滚动越慢

   x.onmouseover=function() {clearInterval(run)};
    ##当鼠标划过x的时候，终止run。滚动停止

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

   </script>
    ##代码结束
   

   由于本人也是处于学习阶段，所以以上内容也许有些地方说的不对，排版也许会有所欠缺，希望高手勿喷，能给我指出不足的地方，如果是新手有哪些不明白的，可以问我。比如说你不明白offsetWidth是什么之类的，大家一起探讨学习下。：）

注：<divclass="b_1">和<divclass="b_2">要有"float:left;"属性，宽和高可以根据内容自定。<divid="b">的宽度要大于<divid="a">否则将不能滚动。

Ps：昨天用斜杠星号注释发表后，注释部分全不显示，所以改为用##代替，如果要用以上代码，手动删除绿色部分即可。请尊重他人劳动成果，转载注明出处。谢谢