首先，無縫滾動的第一個重點就是——動。關(guān)于怎么讓頁面的元素節(jié)點動起來，這就得學明白關(guān)于JavaScript中定時器的相關(guān)知識。

　　JS中的創(chuàng)建定時器的方法包括兩種：setTimeout和setInterval。首先它們接收的參數(shù)相同：第一個參數(shù)是一個函數(shù)，用于定時器執(zhí)行，第二個參數(shù)是一個數(shù)字，代表過多少毫秒之后定時器執(zhí)行函數(shù)。它們的不同在于：setTimeout 是在經(jīng)過指定的時間之后，只執(zhí)行一次函數(shù)，而setInterval，則是每間隔指定時間，就執(zhí)行函數(shù)一次，說簡單點的話，就是setInterval是setTimeout的循環(huán)版。

　　關(guān)于定時器還有一個用法：消除定時器，方法同樣有兩種：clearTimeout 和 clearInterval，它們分別對應不同類型的定時器。另外，它們都只接收一個參數(shù)，這個參數(shù)是定時器返回的一個值（我在chrome中調(diào)試發(fā)現(xiàn)這個返回值都是數(shù)字），用于指定消除那個定時器。

　　定時器的知識掌握之后，就開始分析怎樣使用定時器讓元素動起來。其實這個很簡單，就是類似電影的原理一樣，讓元素在很短的時間內(nèi)發(fā)生連續(xù)的位移，我們看起來的話這個元素就想是在不停地運動啦。關(guān)于怎么讓元素產(chǎn)生位移，通過JS修改元素的樣式就可以實現(xiàn)，例如

　　上面的代碼中speed就是每次產(chǎn)生的位移。關(guān)于speed使用還挺有意思的：我們可以修改speed的正負值來修改滾動的方向。

　　另外，關(guān)于元素的屬性 offsetLeft 我個人認為需要注意兩點：offsetLeft的值由它自己通過定位的left和自己設(shè)定的margin的和、offsetLeft它是相對于它的包含層的距離（offsetTop類似）。當然這都是我自己的理解，肯定不是很準確，這個坑記著，下次專門解決它。

　　讓元素動起來的原理基本就是這樣，下面開始分析這個無縫滾動展示圖片的實現(xiàn)方法，我舉得例子都是向左滾動的,向右的原理一樣，代碼中有提到：

　　首先假設(shè)需要循環(huán)滾動的圖片只有4張，為了滿足圖片滾動起來有循環(huán)的要求，就需要把圖片如圖（1）這樣做：

　　這樣當?shù)谝粡垐D片1滾動出邊框時，后面的圖片1則出現(xiàn)在圖片4的后面，這樣效果看起來就和循環(huán)一樣~

　　當圖片滾動到下面的這種情況時：

　　繼續(xù)滾動就會導致圖片后面出現(xiàn)空白，就不是循環(huán)滾動的效果了，其實這點也是程序的關(guān)鍵所在，每當圖片滾動到圖（2）這種情況時，就應該讓圖片重新回到圖（1）那種狀態(tài)再繼續(xù)滾動，這樣的話就形成了無縫循環(huán)滾動的效果。

　　另外拓展一下程序?qū)懥耸髽艘迫雸D片停止?jié)L動，移出繼續(xù)滾動的效果，就是利用消除定時器的方法實現(xiàn)的，代碼很簡單就不介紹了。還有我為了樣式好看一點，把圖片都設(shè)置為160*120的尺寸使用的，大家運行代碼是需要自己準備圖片。

代碼如下：

以上就是js實現(xiàn)無縫滾動特效的詳細代碼，希望對大家的學習有所幫助。

如對本文有疑問，請?zhí)峤坏浇涣魃鐓^(qū)，廣大熱心網(wǎng)友會為你解答?。? 點擊進入社區(qū)