輪播圖導(dǎo)航制作在Web前端中的實(shí)踐與應(yīng)用

趙素萍，楊 璐，康晶晶

（1.晉中信息學(xué)院大數(shù)據(jù)學(xué)院，晉中 030800；2.晉中信息學(xué)院信息工程學(xué)院，晉中 030800）

0 引言

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

在默認(rèn)情況下，輪播圖是循環(huán)向右輪播，輪播圖的兩側(cè)各有一個(gè)箭頭，用戶可以通過單擊箭頭切換上一張或下一張圖片。輪播圖的圖片也是一種導(dǎo)航，單擊圖片會跳轉(zhuǎn)到相應(yīng)的網(wǎng)頁。輪播圖的下方區(qū)域有焦點(diǎn)，用戶懸浮焦點(diǎn)可實(shí)現(xiàn)圖片切換。

本著一切以用戶為中心的原則，當(dāng)用戶懸浮焦點(diǎn)或單擊箭頭后，暫停周期定時(shí)器，同時(shí)當(dāng)用戶的鼠標(biāo)離開焦點(diǎn)和箭頭區(qū)域后，觸發(fā)周期定時(shí)器讓其自動切換圖片。本案例主要使用HTML5 結(jié)構(gòu)，CSS3 樣 式和JavaScript 腳 本來 實(shí)現(xiàn)輪播圖導(dǎo)航。這些技術(shù)是前端工程師必須要掌握的基本技能。

1 HTML內(nèi)容

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

＜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=“l(fā)t”onclick=“backimg（）”onmouseover=“stopchange（）”

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

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

＜/div＞

2 樣式

樣式主要通過相對定位、絕對定位和偏移將dot 導(dǎo)航和箭頭導(dǎo)航放到合適的位置。通過過渡和hover偽類實(shí)現(xiàn)導(dǎo)航懸浮特效。

2.1 dot導(dǎo)航

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

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

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

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

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

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

.dot｛display：inline-block；

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

border-radius：50%；

｝

2.2 箭頭導(dǎo)航

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

圖1 盒子模型總寬度

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

其中左右導(dǎo)航?jīng)]有設(shè)置外邊距margin，沒有設(shè)置外邊框border，只設(shè)置了padding-top 和height。所以要想達(dá)到300 的高度，只需要使padding-top 加height 等于300 即可。這是初學(xué)者較難掌握的知識點(diǎn)，需要多練習(xí)達(dá)到熟練運(yùn)用的效果。

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

.rt，.lt｛

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

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

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

｝

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

.banner：hover .rt｛right：0｝/*鼠標(biāo)懸浮banner時(shí)，箭頭放在banner右邊*/

3 腳本

腳本的引入方式主要包括三種，行內(nèi)式、內(nèi)嵌式和外鏈?zhǔn)?。這三種引入方式各有特點(diǎn)，分別應(yīng)用于不同的場合。

行內(nèi)式只用于控制當(dāng)前元素，如滾動標(biāo)簽marquee，其鼠標(biāo)懸浮暫停滾動，鼠標(biāo)離開繼續(xù)滾動的效果只需要使用行內(nèi)式即可。由于滾動元素一般在網(wǎng)頁中的使用情況并不多，所以常使用引入式。

嵌入式的腳本一般放在head 中和body 中兩種。由于加載的順序是先head，再body。所以Head 內(nèi)的腳本一般為暫時(shí)不執(zhí)行的方法和全局變量。Body 內(nèi)的腳本一般為暫時(shí)執(zhí)行的JavaScript 腳本。該方法一般用于初學(xué)者初次接觸腳本，以及教授基礎(chǔ)知識的講師。在實(shí)際的網(wǎng)站中推薦使用外鏈?zhǔn)健?/p>

外鏈?zhǔn)酵ㄟ^script 標(biāo)簽的src 屬性來引入“**.js”腳本文件。該方法利于后期維護(hù)，同時(shí)同一個(gè)腳本文件可用于多個(gè)網(wǎng)頁文件，所以減輕了文件體積，可加快頁面的加載速度。

本文主要使用的是行內(nèi)式和外鏈?zhǔn)?。輪播圖主要通過腳本實(shí)現(xiàn)以下幾種效果。

3.1 圖片自動切換

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

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

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

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

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

var lt=document.getElementsByClassName（“l(fā)t”）［0］；//獲取箭頭元素

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

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

var hrefs=［“http：//www.baidu.com”，……］；//4 個(gè)超鏈接網(wǎng)址

為了讓用戶了解到當(dāng)前播放的是第幾張圖片，通過dot 導(dǎo)航的文字顏色變化來實(shí)現(xiàn)。由于計(jì)算機(jī)具有指令性操作的特性，即程序員要讓計(jì)算機(jī)執(zhí)行的每一步操作都必須明確說明，否則會出錯(cuò)，如當(dāng)前播放的是第一張圖片，我們?nèi)绻屍洳シ诺诙垐D片，就需要將第一個(gè)dot 導(dǎo)航先設(shè)置為白色，再將當(dāng)前的第二個(gè)導(dǎo)航設(shè)置為藍(lán)色。由于切換圖片在多個(gè)地方都會用到，為了降低代碼的冗余，這里主要通過定義函數(shù)來實(shí)現(xiàn)，函數(shù)體功能為：將所有列表項(xiàng)的文字顏色都改成白色，修改圖片和超鏈接，修改當(dāng)前dot項(xiàng)的顏色。主要代碼如下：

var i=-1；//設(shè)置全局變量，記錄當(dāng)前播放的圖片

function change（k）｛

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

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

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

dots［k］.style.color=“blue”；//重新設(shè)置當(dāng)前列表項(xiàng)的文字顏色

｝

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

function changeimg（）｛

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

change（i）；修改圖片

｝

3.2 dot導(dǎo)航

由于計(jì)算機(jī)的每一步操作都要求由程序員給出，所以為了實(shí)現(xiàn)鼠標(biāo)懸浮更改圖片，鼠標(biāo)離開繼續(xù)切換的效果，需要通過onmouseover 鼠標(biāo)懸浮事件和onmouseout 鼠標(biāo)離開事件，分別設(shè)置以下效果：

鼠標(biāo)懸浮overchange事件實(shí)現(xiàn)輪播圖切換到當(dāng)前圖片和超鏈接，并暫停周期切換，獲取當(dāng)前dot 導(dǎo)航的下標(biāo)可以通過參數(shù)傳遞。主要代碼如下：

function overchange（k）｛

change（k）；

clearInterval（sj）；

｝

鼠標(biāo)離開settime 事件繼續(xù)從當(dāng)前圖片的下一張圖片開始周期切換。為了獲取當(dāng)前圖片的下標(biāo)，這里使用了最簡單的方法，也是初學(xué)者最容易接受的方法，通過參數(shù)傳遞當(dāng)前導(dǎo)航的下標(biāo)，因?yàn)閿?shù)組的下標(biāo)是從0開始的，所以第一個(gè)dot導(dǎo)航的參數(shù)為0。

function settime（index）｛

i=index；//通過參數(shù)獲取當(dāng)前的dot導(dǎo)航下標(biāo)

sj=setInterval（changeimg，3000）；

｝

初學(xué)者一定要注意的是，已經(jīng)定義的變量不需要重復(fù)定義，所以這里的周期定時(shí)器不能重新定義，否則會發(fā)生切換錯(cuò)亂，這里的錯(cuò)亂主要表現(xiàn)為兩個(gè)定時(shí)器同時(shí)定時(shí)，切換的速度不再是3 s一張，而是更快。

3.3 箭頭導(dǎo)航

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

function nextimg（）｛

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

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

｝

最終的輪播圖效果如下，除了能正常切換外，圖2 表示鼠標(biāo)懸浮時(shí)的實(shí)現(xiàn)效果；圖3 表示已經(jīng)是最后一張還單擊下一張的效果。

圖2 鼠標(biāo)懸浮DOT2效果

圖3 鼠標(biāo)單擊NEXT效果

4 結(jié)語

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