通過JS實現banner圖的滾動主要是定時器的應用 先新建好banner圖的幾張圖片,最後一張與第一張用同一個,保證滾動的不間斷 改好樣式,需註意所有圖片要在同行顯示,否則不能向左滾動 聲明一個函數,為定時器函數,函數內通過switch結構執行,case的值通過聲明一個全局變數每次執行函數的時候使其 ...
通過JS實現banner圖的滾動主要是定時器的應用
先新建好banner圖的幾張圖片,最後一張與第一張用同一個,保證滾動的不間斷
改好樣式,需註意所有圖片要在同行顯示,否則不能向左滾動
聲明一個函數,為定時器函數,函數內通過switch結構執行,case的值通過聲明一個全局變數每次執行函數的時候使其自加,通過執行函數的次數來確定banner圖向左移動多少的距離。需註意第5次要使全局變數歸零才能使定時器內的switch結構無限迴圈,在樣式表中可以設置過渡效果,使滾動更有節奏感
接下來實現banner的點擊切換效果
做好樣式後開始寫函數
定義一個有參數函數,通過不同的參數運算switch結構,改變banner的向左滾動距離,最下麵的num = num1-1是為了讓點擊後停留的頁面不急於滾動,而是等待一次定時器運算之後在進行一次滾動,使停留的banner圖達到顯示更久的效果。
最後的效果圖如下