網頁中簡易輪播圖案例解析

2021-10-21 02:15:56張穎

信息記錄材料 2021年9期

關鍵詞：設置

張穎

（揚州高等職業技術學校江蘇揚州 225003）

1 引言

在一個網站的首頁，通常會留有一片位置來凸顯網站的動態，這片區域常常采用多張圖片切換的效果，這就是輪播圖。輪播圖也叫首頁焦點圖，無論是大型購物網站，還是政府網站、教育網站、新聞網站[1-2]，輪播圖幾乎成了所有網站的標配，也是網站的一大看點和亮點。

輪播在默認情況下是循環向右輪播，在圖片區的左右兩側一般會放兩個按鈕[3]，用戶可以點擊左右按鈕來切換圖片，圖片區下方一般還會放幾個與大圖對應的圓點、短線、數字圓圈、縮略圖等，如果點擊某個指示器，會直接跳轉到所單擊的那張輪播圖，并且圖片標題也會同時跳轉。輪播圖內容可以是圖像、內嵌框架、視頻或者其他任何類型的內容。

如何高效便捷地設計輪播圖的HTML結構、進行樣式排版以及使用JavaScript控制輪播行為及交互，成了前端工程師的基本功。本文旨在對簡易網頁輪播圖案例進行解析，理解通過CSS樣式及JavaScript實現自動輪播、輪播控制的方法，熟悉前端頁面開發的過程[4]。

2 輪播圖設計思路

通過HTML布局將要展示的圖片全部放在盒子里，在CSS文件中設置網頁元素的顯示、隱藏等格式，然后通過JavaScript代碼動態更新網頁元素的顯示隱藏格式等，使得輪播圖展示區只顯示其中的一張圖片，而將其余的圖片隱藏。為了實現輪播效果，可以通過JavaScript中的setInterval()方法間歇調用指定的翻頁代碼來實現自動翻頁。輪播效果見圖1。

圖1 輪播效果圖

3 實現代碼的解析

3.1 編寫HTML布局頁面

頁面采用div布局，body標簽中包括以下幾點。

（1）5張輪播的圖片，圖片可多于5張，這里添加就可以了，但是建議輪播圖片不要太多，為了讓圖片顯示效果達到最佳，圖片的大小最好統一。

（2）用

標簽定義列表項來制作輪播圖底部指示器。

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

body標簽內的主體布局代碼見圖2。

圖2 HTML代碼主體截圖

3.2 輪播效果的實現過程

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

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

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

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

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

3.2.2 JavaScript文件主要代碼

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

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

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

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

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

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

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

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

4 結語

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