這篇blog是使用html與js實現無縫滾動與間歇性無縫滾動，首先，先看一下效果圖：

    這種效果，在網站中經常見到，下面，我們實現這個效果。

首先，這里有以下知識點：

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

setInterval()與clearInterval的簡單用法

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

無縫滾動

html文件：

    這里實現無縫滾動的原理是：     頁面打開的時候，如圖1，讓ol1開始向上滾動，當ol1滾動到圖2的位置，繼續向上滾動，這時ol2（ol2是ol1的一個克隆，與ol1一模一樣的數據）就顯示出來，當ol1滾動到圖三的位置時，就讓ol1回到初始位置，圖1的那個位置.整個滾動的原理就是這樣。 圖1： 圖2： 圖3：

貼上我們的js代碼：

    注釋里寫的很清楚，也沒有多少困難，應該不會有什么問題。

間歇性無縫滾動

    間歇性無縫滾動與無縫滾動很相似，只是在無縫滾動的基礎上增加了停留時間，讓它每隔多少秒之后再執行向上滾動的操作。 這里我們要學習一個新的知識點：

貼上js代碼：     代碼與無縫滾動的代碼大同小異，主要是多了setTimeout來進行延遲滾動。     邏輯：頁面啟動后延遲2秒執行move(),在move()中執行向上滾動的邏輯，其中每隔50毫秒執行一次stop()，當滾動的區域是一行數據的整數倍時，停止1秒后繼續執行move()滾動。當滾動區域是整個的一半時（因為在開始的時候克隆了一個area，area變成兩個相同的數據），將恢復到初始狀態，無限滾動下去。

    至此，無縫滾動完成。