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">

    var x=document.getElementById("a");
     //自定義變量x，getElementById是通過id獲取對象。你可以理解為：將document.getElementById("a")
     //這段代碼縮寫為x了。這里的x你可以隨便換。在這里不定義x也行不過后面的代碼會麻煩點。

    var y=document.getElementByIdx_x("b_1");
    var z=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;
            //scrollLeft：代表頁面利用滾動條滾動到右側時，隱藏在滾動條左側的頁面的寬度，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寬的空白

        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>

   

注：<div class="b_1">和<div class="b_2">要有 "float:left;"屬性，寬和高可以根據內容自定。<div id="b">的寬度要大於<div id="a">否則將不能滾動。