通過JS實現banner圖的滾動主要是定時器的應用

先新建好banner圖的幾張圖片，最后一張與第一張用同一個，保證滾動的不間斷

?

改好樣式，需注意所有圖片要在同行顯示，否則不能向左滾動

聲明一個函數，為定時器函數，函數內通過switch結構執行，case的值通過聲明一個全局變量每次執行函數的時候使其自加，通過執行函數的次數來確定banner圖向左移動多少的距離。需注意第5次要使全局變量歸零才能使定時器內的switch結構無限循環，在樣式表中可以設置過渡效果，使滾動更有節奏感

?

?

接下來實現banner的點擊切換效果

?

做好樣式后開始寫函數

定義一個有參數函數，通過不同的參數運算switch結構，改變banner的向左滾動距離，最下面的num = num1-1是為了讓點擊后停留的頁面不急于滾動，而是等待一次定時器運算之后在進行一次滾動，使停留的banner圖達到顯示更久的效果。

?

最后的效果圖如下

?

?

總結

以上是生活随笔為你收集整理的如何使用JS实现banner图滚动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。