如何使用JS實現banner圖滾動

標籤：參數   switch   定時   距離   開始   9.png   運算   全域變數   聲明   

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

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

 

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

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

 

 

接下來實現banner的點擊轉場效果

 

做好樣式後開始寫函數

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

 

最後的如下

 

 

如何使用JS實現banner圖滾動