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

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

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

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

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

做好樣式后開始寫函數

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

