輪播圖導航制作在Web前端中的實踐與應用

趙素萍，楊 璐，康晶晶

（1.晉中信息學院大數據學院，晉中 030800；2.晉中信息學院信息工程學院，晉中 030800）

0 引言

網站的首頁，除了有常規的導航欄，通常還有一個輪播圖導航。輪播圖也叫焦點圖，無論是購物網站、政府網站、教育網站，還是新聞網站，無論是在電腦端還是手機端的網頁，無論是手機APP 還是各種APP 內嵌的小程序，主題banner 部分都可見到輪播圖。輪播圖是一種觀賞性強的信息展示方式。

在默認情況下，輪播圖是循環向右輪播，輪播圖的兩側各有一個箭頭，用戶可以通過單擊箭頭切換上一張或下一張圖片。輪播圖的圖片也是一種導航，單擊圖片會跳轉到相應的網頁。輪播圖的下方區域有焦點，用戶懸浮焦點可實現圖片切換。

本著一切以用戶為中心的原則，當用戶懸浮焦點或單擊箭頭后，暫停周期定時器，同時當用戶的鼠標離開焦點和箭頭區域后，觸發周期定時器讓其自動切換圖片。本案例主要使用HTML5 結構，CSS3 樣 式和JavaScript 腳 本來 實現輪播圖導航。這些技術是前端工程師必須要掌握的基本技能。

1 HTML內容

網頁中主要顯示的內容為一張超鏈接圖片，4個無序列表項實現用戶想看隨機一張輪播圖的效果，兩個箭頭實現上一張和下一張的效果，這里需要注意的是，大于號和小于號在HTML中屬于標簽的一部分，在正文中不允許使用，需要使用特殊字符對應的代碼才能實現，其中“<；”表示小于號，“>；”表示大于號，主要代碼如下：

＜div class=“banner”＞

＜a href=“”id=“imga”＞＜img src=“”id=“bnimg”＞＜/a＞

＜ul＞

＜li class=“dot”onmouseover=“overchange（0）”

onmouseout=“settime（0）”＞1＜/li＞//2、3、4同1

＜/ul＞

＜div class=“lt”onclick=“backimg（）”onmouseover=“stopchange（）”

onmouseout=“startchange（）”＞<；＜/div＞

＜div class=“rt”onclick=“nextimg（）”其余同上＞>；＜/div＞

＜/div＞

2 樣式

樣式主要通過相對定位、絕對定位和偏移將dot 導航和箭頭導航放到合適的位置。通過過渡和hover偽類實現導航懸浮特效。

2.1 dot導航

通過絕對定位的定位設置，將dot 導航放置在合適的位置，需要注意的是，設置絕對定位的元素，需要將父元素設置為已經定位的一種，主要包括絕對定位absolute、相對定位relative 和固定定位fixed。由于絕對定位會使其失去在源文檔流的位置，所以如果要保留父元素在源文檔流的位置，父元素不能設置為絕對定位。由于固定定位始終是相對于瀏覽器進行定位的，而這種方式使用的情況少之又少，所以常用的方式是將父元素定位為relative 相對定位，這樣父元素既是已經定位的元素，同時也不會失去源文檔流中的位置。

通過偏移進行精確定位，偏移包括四種，分別是left、right、top 和bottom，一般情況下只需要使用兩個屬性就可以達到我們想要的效果，如需將元素設置在父元素的左下角，那么只需要設置left 和bottom 兩個屬性即可。如果用戶同時設置了left 和right，瀏覽器會以left 為準。同理，如果用戶同時設置了top 和bottom，瀏覽器會以top為準。主要樣式代碼如下：

.banner｛position：relative；｝/*父元素*/

. banner ul｛position：absolute；bottom：10px；left：800px；｝/*子元素*/

設置每個dot 導航的背景為圓形、灰色、透明度為0.5 的樣式，由于列表項為塊狀元素，特點是獨占一行，為了讓其共享一行，先需要將其設置為行內塊式，行內塊式的特定是可以共享一行，同時還可以設置其寬度、高度。一般情況下，橫向的導航都是這樣設置的。

背景顏色是通過rgba 函數來實現的，rgb 是三原色，a是透明度，通過一個函數即可定義元素的背景顏色和透明度。為了增加網站元素的立體效果，一般元素都會加圓角和陰影。初學者可以多次嘗試選擇合適的圓角半徑、陰影大小。主要樣式代碼如下：

.dot｛display：inline-block；

background-color：rgba（11，11，11，0.5）；

border-radius：50%；

｝

2.2 箭頭導航

盒子模型的整體寬度從外向內分別包括外邊距、邊框、內填充、寬度。具體計算如圖1所示。

圖1 盒子模型總寬度

為了將箭頭放到合適的位置，內填充設置為離top 有100 px 的位置，需要注意的是，banner 的高度為300，內填充為100 時，內容的高度只能200。元素的整體高度如公式1所示：

其中左右導航沒有設置外邊距margin，沒有設置外邊框border，只設置了padding-top 和height。所以要想達到300 的高度，只需要使padding-top 加height 等于300 即可。這是初學者較難掌握的知識點，需要多練習達到熟練運用的效果。

先設置看不到的左右兩邊，當鼠標懸浮banner 時，左右導航定位在banner 的左右兩邊可以看到的位置，主要通過絕對定位和偏移實現，為了增加動畫效果，使用過渡實現，背景顏色透明度為0.2，這里只展示右邊的箭頭，學習者可根據右箭頭自主添加左箭頭的樣式。主要代碼如下：

.rt，.lt｛

background-color：rgba（11，11，11，0.2）；

padding-top：100px；height：200px；

transition：all 0.5s；/*過渡*/

｝

.rt｛right：-1000px；｝/*初始放在離右邊很遠的位置*/

.banner：hover .rt｛right：0｝/*鼠標懸浮banner時，箭頭放在banner右邊*/

3 腳本

腳本的引入方式主要包括三種，行內式、內嵌式和外鏈式。這三種引入方式各有特點，分別應用于不同的場合。

行內式只用于控制當前元素，如滾動標簽marquee，其鼠標懸浮暫停滾動，鼠標離開繼續滾動的效果只需要使用行內式即可。由于滾動元素一般在網頁中的使用情況并不多，所以常使用引入式。

嵌入式的腳本一般放在head 中和body 中兩種。由于加載的順序是先head，再body。所以Head 內的腳本一般為暫時不執行的方法和全局變量。Body 內的腳本一般為暫時執行的JavaScript 腳本。該方法一般用于初學者初次接觸腳本，以及教授基礎知識的講師。在實際的網站中推薦使用外鏈式。

外鏈式通過script 標簽的src 屬性來引入“**.js”腳本文件。該方法利于后期維護，同時同一個腳本文件可用于多個網頁文件，所以減輕了文件體積，可加快頁面的加載速度。

本文主要使用的是行內式和外鏈式。輪播圖主要通過腳本實現以下幾種效果。

3.1 圖片自動切換

自動切換需要用到周期性定時器的函數setInterval（周期性觸發時間，觸發周期）。通過該函數，讓瀏覽器自動每隔一定時間觸發修改圖片的函數即可。為了修改圖片，需要先獲取到網頁中的元素，獲取元素需要使用DOM 文檔對象模型，獲取元素的方法主要有四種，主要包括getElementById、getElementsByName、getElementsByTagName、getElementsByClassName。這里初學者需要注意，由于ID 具有唯一性，所以通過ID獲取元素的方法是getElementById，其中Element 表示一個元素，可以直接用，而其他三種情況沒有唯一性，即使只有一個，返回的元素類型仍然是數組，也需要通過下標［0］來取出元素。這是初學者經常會犯的一個錯誤。本案例中的4 個dot 導航就需要通過類名獲得，否則通過ID 獲取的方法會有一定的代碼冗余，也會降低瀏覽器加載的速度。本案例引入的元素和定義的變量主要如下：

var sj=setInterval（changeimg，3000）；//3s 切換照片的周期定時器

var imgshow=document.getElementById（‘bnimg’）；

var imga=document.getElementById（“imga”）；//通過ID獲取超鏈接和圖片

var dots=document.getElementsByClassName（‘dot’）；//獲取所有DOT

var lt=document.getElementsByClassName（“lt”）［0］；//獲取箭頭元素

為了在同一個圖片元素中顯示不同的圖片，只需要修改圖片元素路徑——src 屬性即可。此時多張圖片的路徑主要是通過數組來預先設置，然后再將其循環設置為圖片的src 屬性。超鏈接的鏈接目標同上。主要代碼如下：

var imgspath=［“images/b1.jpg”，……］；//4 張圖片路徑

var hrefs=［“http：//www.baidu.com”，……］；//4 個超鏈接網址

為了讓用戶了解到當前播放的是第幾張圖片，通過dot 導航的文字顏色變化來實現。由于計算機具有指令性操作的特性，即程序員要讓計算機執行的每一步操作都必須明確說明，否則會出錯，如當前播放的是第一張圖片，我們如果要讓其播放第二張圖片，就需要將第一個dot 導航先設置為白色，再將當前的第二個導航設置為藍色。由于切換圖片在多個地方都會用到，為了降低代碼的冗余，這里主要通過定義函數來實現，函數體功能為：將所有列表項的文字顏色都改成白色，修改圖片和超鏈接，修改當前dot項的顏色。主要代碼如下：

var i=-1；//設置全局變量，記錄當前播放的圖片

function change（k）｛

clearcolor（）；//清除所有顏色

imgshow.src=imgspath［k］；//通過下標修改顯示的圖片

imga.href=hrefs［k］；//通過下標修改超鏈接的鏈接目標

dots［k］.style.color=“blue”；//重新設置當前列表項的文字顏色

｝

經過上述的基本操作后，只需要設置周期性觸發操作的函數，即可實現自動切換。為防止數組溢出顯示錯誤，需要確定全局變量i的值始終在0～3之間。主要代碼如下：

function changeimg（）｛

if（++i＞3）i=0；//如果下一項超出范圍，回到第一項

change（i）；修改圖片

｝

3.2 dot導航

由于計算機的每一步操作都要求由程序員給出，所以為了實現鼠標懸浮更改圖片，鼠標離開繼續切換的效果，需要通過onmouseover 鼠標懸浮事件和onmouseout 鼠標離開事件，分別設置以下效果：

鼠標懸浮overchange事件實現輪播圖切換到當前圖片和超鏈接，并暫停周期切換，獲取當前dot 導航的下標可以通過參數傳遞。主要代碼如下：

function overchange（k）｛

change（k）；

clearInterval（sj）；

｝

鼠標離開settime 事件繼續從當前圖片的下一張圖片開始周期切換。為了獲取當前圖片的下標，這里使用了最簡單的方法，也是初學者最容易接受的方法，通過參數傳遞當前導航的下標，因為數組的下標是從0開始的，所以第一個dot導航的參數為0。

function settime（index）｛

i=index；//通過參數獲取當前的dot導航下標

sj=setInterval（changeimg，3000）；

｝

初學者一定要注意的是，已經定義的變量不需要重復定義，所以這里的周期定時器不能重新定義，否則會發生切換錯亂，這里的錯亂主要表現為兩個定時器同時定時，切換的速度不再是3 s一張，而是更快。

3.3 箭頭導航

當用戶單擊左右剪頭時，分別切換上一張和下一張，需要注意的是，最后一張的下一張不能切換時，需要將顏色改為灰色，讓用戶有個心理準備，第一張的前一張同理；否則，實現切換并停止周期定時器。直到鼠標離開時重新設置周期定時器即可。主要代碼如下：

function nextimg（）｛

if（++i＞3）｛i=3； rt.style.color=“gray”；｝//最后一個不能切換，文字設為灰色

else｛change（i）；clearInterval（sj）；｝//切換并停止自動翻頁

｝

最終的輪播圖效果如下，除了能正常切換外，圖2 表示鼠標懸浮時的實現效果；圖3 表示已經是最后一張還單擊下一張的效果。

圖2 鼠標懸浮DOT2效果

圖3 鼠標單擊NEXT效果

4 結語

本案例主要使用了HTML5 的盒子模型、列表、超鏈接、圖片等標簽；CSS3的過渡、偽類、透明背景、定位和圓角等特效；JavaScript 的鼠標單擊、懸浮、離開事件，Window 對象的周期定時器等功能；是綜合性較強的案例，也是初學者比較感興趣的案例，希望為初學者提供學習素材。