js"无缝"滚动原理(解决IE与"火狐"的差异）

前几天，因为要做一个图片的无缝滚动，所以上网查了一下资料。发现虽然网上有很多的相关教程，但却没有多少个能说得详细和透彻的，通常都是给出一大段代码让人看得头晕。但没办法，总不能因为一点代码而不却步吧。呵，，

   闲话少说了。首先要介绍一下的是DHTML中的offsetWidth、scrollLeft(我做的是左滚动，所以就以这两个为例，其它方向的都差不多的了）

   offsetWidth简单来就就是对象的宽度,如

这样在js中，document.getElementById("obj").offsetWidth所得到的就是120。

   scrollLeft是对象相对左边的滚动的位置。

  滚动原理：主要是利用js控制包含滚动对象的“外对象”(我都不知该怎样表达了）的scrollLeft来实现。另外配合CSS中overflow:hidden实现陷藏滚动条的效果。具体点说就是：在CSS中，当对象内部的内容超出对象本身的宽度或高度时，可以用overflow来控制是否允许滚动或自动适应（注意：这里是关键。如果不允许滚动，那么什么“无缝”都是空谈的了）。所以我们要滚动一些对象（如几张图片）时，我们就可以在这些对象的外面加上一个比它们总的宽度或高度要小的对象，这样，就可以利用overflow来实现滚动了。

下面是我所画的一个原理图（点击查看大图）：

   

   

    网上很多的例子是这样实现的(这里有一个我从网上抄来改造测试用的）有兴趣的可以查看它的源程序。

  它的主要原理是:先复制一个内对象，然后两个对象一起滚动，当内对象1滚动完后，滚动位置又回来原来的位置，又开始滚动内对象1。这样看起来，就好象对象在不断的滚动（即所谓的无缝滚动，其实细心留意，会发现当内对象1又开始滚动时，中间会有一个小小的跳动）。
          关键代码如下：
             内对象2.innerHTML=内对象1.innerHTML;    //复制内对象
             if(内对象2.offsetWidth-外对象.scrollLeft<=0)
                   外对象.scrollLeft-=内对象1.offsetWidth;//重新滚动内对象1
   但通常这样写在“火狐”里能不断滚动，在IE里却都是滚动一阵就不动了，为什么呢？因为在IE中scrollLeft包括了滚动条的宽度，而“火狐”中却不包括。所以内对象2.offsetWidth-外对象.scrollLeft<=0在IE中这个条件通常都是不能满足的，因为IE中，滚动到右滚动条的左侧scrollLeft就会“停”了，不信可以看一个实例（http://knowmore.blogbus.com/files/11769931210.html ）。

     如何解决这个问题呢？主要是设一个变量与scrollLeft一起增长，当变量与scrollLeft不相等时，就说明已经滚动到尽头了，把scrollLeft和变量设置成到初始状态，内对象1就又可以滚动了！（具体实例）

     本来想更具体一点分析的，无奈表达能力欠佳，加上在公司里空闲时间以不多，所以只好凑合着写了出来。希望有点用。