網(wǎng)頁中簡易輪播圖案例解析

（3）用一對尖括號制作輪播圖左右導航控制鏈接。

body標簽內(nèi)的主體布局代碼見圖2。

圖2 HTML代碼主體截圖

3.2 輪播效果的實現(xiàn)過程

3.2.1 CSS文件中的主要格式設置

（1）設置圖片隱藏和顯示。display:none;語句設置當前元素不顯示，display:block;語句設置當前元素顯示為塊級元素。

（2）設置底部指示器位置。

（3）設置底部指示器格式。

（4）設置選中指示器填充為白色。

3.2.2 JavaScript文件主要代碼

（1）獲取網(wǎng)頁元素，包括圖片、指示器、左右導航控制。

（2）初始化。第1張圖片顯示，對應的指示器高亮。此處"item active"是多類選擇器。要注意的是：如果這兩個類選擇器中有相同的屬性，根據(jù)瀏覽器的解析順序，則該屬性的值按照CSS文件中出現(xiàn)的順序，以最后一個選擇器中的屬性值為準。與應用類時類名書寫的先后順序無關，比如這里的"item active"也可以寫成"active item"。

（3）輪播函數(shù)。主要功能可以概況為：①設置所有圖片隱藏、所有底部指示器不高亮，這部分功能主要是由for循環(huán)實現(xiàn)的，并記錄當前位置；②設置當前被選中圖片顯示、所有底部指示器高亮，由slide函數(shù)中最后兩行語句實現(xiàn)的；③當指示器單擊事件被觸發(fā)時，如果單擊的是當前位置則跳出輪播函數(shù)，單擊的不是當前位置的話，記錄當前位置并調(diào)用輪播函數(shù)。

（4）對導航控制左鏈接綁定單擊事件，實現(xiàn)圖片的后退顯示。當輪播到第1張圖片的時候，轉到輪播最后一張圖片。current == -1時，本例中將current 賦值為4，即輪播組圖中的最后一張圖片，再循環(huán)向左輪播。

（5）對導航控制右鏈接綁定單擊事件，實現(xiàn)圖片的前進顯示，當輪播到最后一張圖片的時候，轉到輪播第1張圖片。current == indicatorsLists.length時，一共5張圖片，當前current =5，此時將current 賦值為0，即輪播組圖中的第1張圖片，再循環(huán)向右輪播。

（6）輪播開始。此處借助setInterval() 方法，每間隔3s調(diào)用1次controlRight.onclick方法，實現(xiàn)圖片的輪播效果，讓圖片自動向右滑動。setInterval() 方法可按照指定的周期（以ms計）來調(diào)用函數(shù)，在不加干預的情況下，間歇調(diào)用將會一直執(zhí)行到頁面卸載，直到 clearInterval() 被調(diào)用或窗口被關閉。

（7）鼠標移入到導航控制鏈接上時停止輪播。clearInterval(timer);語句停止輪播開始處的setInterval() 方法的調(diào)用。opacity屬性設置左右導航控制鏈接透明度為1，即顯示。

（8）鼠標移出導航控制鏈接上時，timer = setInterval(controlRight.onclick, 3000);實現(xiàn)恢復輪播。同時，鼠標一次導航控制鏈接時，左右導航鏈接（即一對尖括號）不顯示。

4 結語

輪播圖的實現(xiàn)方法很多，圖片滑動過程中也可以加入淡入淡出、緩沖等更加優(yōu)化的視覺效果，這些可以再優(yōu)化CSS的格式設置。本文主要對使用JavaScript中的循環(huán)定時器實現(xiàn)了圖像輪播無縫銜接的代碼進行解析，希望能夠為網(wǎng)站開發(fā)人員制作輪播圖提供借鑒。