這篇blog是使用html與js實(shí)現(xiàn)無縫滾動(dòng)與間歇性無縫滾動(dòng)，首先，先看一下效果圖：

    這種效果，在網(wǎng)站中經(jīng)常見到，下面，我們實(shí)現(xiàn)這個(gè)效果。

首先，這里有以下知識(shí)點(diǎn)：

    這里給大家貼一張w3c上對setInterval的介紹，用法都很清楚：

setInterval()與clearInterval的簡單用法

    接下來，開始我們的主題了：

無縫滾動(dòng)

html文件：

    這里實(shí)現(xiàn)無縫滾動(dòng)的原理是：     頁面打開的時(shí)候，如圖1，讓ol1開始向上滾動(dòng)，當(dāng)ol1滾動(dòng)到圖2的位置，繼續(xù)向上滾動(dòng)，這時(shí)ol2（ol2是ol1的一個(gè)克隆，與ol1一模一樣的數(shù)據(jù)）就顯示出來，當(dāng)ol1滾動(dòng)到圖三的位置時(shí)，就讓ol1回到初始位置，圖1的那個(gè)位置.整個(gè)滾動(dòng)的原理就是這樣。 圖1： 圖2： 圖3：

貼上我們的js代碼：

    注釋里寫的很清楚，也沒有多少困難，應(yīng)該不會(huì)有什么問題。

間歇性無縫滾動(dòng)

    間歇性無縫滾動(dòng)與無縫滾動(dòng)很相似，只是在無縫滾動(dòng)的基礎(chǔ)上增加了停留時(shí)間，讓它每隔多少秒之后再執(zhí)行向上滾動(dòng)的操作。 這里我們要學(xué)習(xí)一個(gè)新的知識(shí)點(diǎn)：

貼上js代碼：     代碼與無縫滾動(dòng)的代碼大同小異，主要是多了setTimeout來進(jìn)行延遲滾動(dòng)。     邏輯：頁面啟動(dòng)后延遲2秒執(zhí)行move(),在move()中執(zhí)行向上滾動(dòng)的邏輯，其中每隔50毫秒執(zhí)行一次stop()，當(dāng)滾動(dòng)的區(qū)域是一行數(shù)據(jù)的整數(shù)倍時(shí)，停止1秒后繼續(xù)執(zhí)行move()滾動(dòng)。當(dāng)滾動(dòng)區(qū)域是整個(gè)的一半時(shí)（因?yàn)樵陂_始的時(shí)候克隆了一個(gè)area，area變成兩個(gè)相同的數(shù)據(jù)），將恢復(fù)到初始狀態(tài)，無限滾動(dòng)下去。

    至此，無縫滾動(dòng)完成。