網(wǎng)頁中實(shí)現(xiàn)輪播圖的簡易方法探討

馬寧寧

摘要：互聯(lián)網(wǎng)時(shí)代，網(wǎng)站信息的展示方式將極大地影響信息的傳遞效率和用戶的體驗(yàn)效果。輪播圖能夠利用有限的網(wǎng)頁空間展示更多的信息內(nèi)容，并且更具觀賞性，因而被廣泛使用，也提升了用戶體驗(yàn)。文章介紹了3種制作輪播圖的簡易方法，這些方法操作簡單、功能強(qiáng)大、效果絢麗，希望能夠?yàn)榫W(wǎng)站開發(fā)人員制作輪播圖提供借鑒。

關(guān)鍵詞：輪播圖;Bootstrap;Swiper;myFocus

1 輪播圖簡介

1.1 定義

在網(wǎng)站制作過程中，為了利用最少的空間，展示最多的內(nèi)容，“輪播圖”便應(yīng)運(yùn)而生。望文生義，“輪播圖”即輪流播放的圖片。羅才華認(rèn)為，輪播圖又叫焦點(diǎn)圖，就是在固定的網(wǎng)頁界面中，將幾張相同大小的圖片，按照相同的時(shí)間間隔進(jìn)行循環(huán)展示;在圖片區(qū)的左右兩側(cè)一般會(huì)放兩個(gè)按鈕，用戶可以點(diǎn)擊左右按鈕來切換圖片;圖片區(qū)下方一般還會(huì)放幾個(gè)與大圖對應(yīng)的圓點(diǎn)、短線、數(shù)字圓圈、縮略圖等，用戶也可以點(diǎn)擊這些導(dǎo)航按鈕來切換圖片[1]。

1.2 功能作用

實(shí)際應(yīng)用中的輪播圖是多姿多彩的：圖片區(qū)不僅可以放圖片，還可以放文字說明和超鏈接;切換圖片不僅可以點(diǎn)左右按鈕或下面小點(diǎn)，還可以用鼠標(biāo)放在圖片上左右拖動(dòng)來實(shí)現(xiàn);圖片展示區(qū)既可以一屏只展示一張圖片，也可以每屏展示幾張或者分幾行展示圖片;此外，導(dǎo)航小圓點(diǎn)還可以換成數(shù)字標(biāo)簽，切換方式也不局限于幻燈片切換方法，還可以進(jìn)行3D旋轉(zhuǎn)切換等。這些功能我們在實(shí)際網(wǎng)站制作中都經(jīng)常會(huì)用到。

輪播圖一般放在網(wǎng)頁最顯眼的位置，由于動(dòng)態(tài)效果具有一定的觀賞性，所以能夠第一時(shí)間吸引用戶注意，進(jìn)而點(diǎn)擊瀏覽。國外設(shè)計(jì)機(jī)構(gòu)的調(diào)查顯示，輪播圖的點(diǎn)擊率明顯高于文字內(nèi)容，轉(zhuǎn)化率也達(dá)到文字標(biāo)題的5倍之多[2]。因此，輪播圖技術(shù)已經(jīng)被廣泛應(yīng)用到各大門戶網(wǎng)站中。

1.3 實(shí)現(xiàn)原理

輪播圖的實(shí)現(xiàn)原理就是：將一組大小相同的圖片平鋪在一行中，然后通過CSS代碼布局，使得輪播圖展示區(qū)只顯示其中的一張圖片或固定數(shù)目的圖片，而將其余的圖片隱藏。為了實(shí)現(xiàn)輪播效果，可以通過JavaScript語言編程來控制圖片區(qū)的整體位移量、改變圖片的高度或透明度，同時(shí)使用定時(shí)器實(shí)現(xiàn)圖片自動(dòng)播放，還可以給輪播圖加上鼠標(biāo)點(diǎn)擊事件或移入移出事件，實(shí)現(xiàn)輪播圖的點(diǎn)擊切換或移入移出透明度變化效果[3]。具體實(shí)現(xiàn)原理如圖1所示。

2 實(shí)現(xiàn)方法

常見的輪播圖制作方法主要有：1）HTML5+CSS3+JavaScript：使用原生的JavaScript腳本來實(shí)現(xiàn)輪播圖的步驟比較煩瑣，但非常有助于理解輪播圖的具體實(shí)現(xiàn)原理，比較適合JavaScript的初學(xué)者;2）HTML5+CSS3+jQuery：jQuery是一個(gè)JavaScript框架，它封裝了JS常用的功能代碼，大大簡化了編碼量，還解決了瀏覽器的兼容性問題，制作輪播圖也稍微簡單些;3）HTML5+CSS3：運(yùn)用CSS3的變形（transform）、過渡（transition）、動(dòng)畫（animation）等屬性也可以實(shí)現(xiàn)輪播圖效果，不過該方法的實(shí)用性較差，很多復(fù)雜功能無法實(shí)現(xiàn)。

上述三種實(shí)現(xiàn)方式各有各的優(yōu)缺點(diǎn)，但都需要一定的編程基礎(chǔ)和強(qiáng)大的邏輯思維能力，需要開發(fā)者把輪播圖的具體實(shí)現(xiàn)步驟用相應(yīng)的語言描述出來，對于初學(xué)者不太友好。本文將介紹3種比較容易上手的輪播圖實(shí)現(xiàn)方法，讓原本煩瑣難懂的實(shí)現(xiàn)過程變得簡單易懂。并以同一種輪播圖效果（如圖2所示）為例，分別介紹這三種插件的具體實(shí)現(xiàn)方法。

2.1 Bootstrap

Bootstrap是全球最受歡迎的前端框架之一，可用來構(gòu)建響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的網(wǎng)站[4]。Bootstrap基于less開發(fā)，集合了HTML、CSS、JavaScript、Jquery等技術(shù)，是一套簡潔靈活的前端開源框架。它包含50多個(gè)實(shí)用的布局類、工具類和頁面內(nèi)容類的組件，為Web前端工程師提供了規(guī)范的CSS標(biāo)準(zhǔn)和JS插件，兼容性強(qiáng)，有效解決了前端開發(fā)中因?yàn)闉g覽器兼容、屏幕分辨率、移動(dòng)終端類型等問題產(chǎn)生的網(wǎng)頁布局混亂、界面風(fēng)格不一、用戶體驗(yàn)差、JS交互失效等問題[5]。使用Bootstrap開發(fā)的網(wǎng)站，能夠根據(jù)用戶終端設(shè)備的屏幕尺寸自動(dòng)調(diào)整頁面布局和圖片尺寸，使前端開發(fā)變得快捷高效[6]。那么，用Bootstrap框架制作的網(wǎng)站中如何制作輪播圖呢？其中包含的輪播（carousel）組件完美地解決了這個(gè)問題，同時(shí)用該組件開發(fā)的輪播圖還具有響應(yīng)式的特點(diǎn)。

使用Bootstrap中的carousel組件制作圖2中的輪播圖的步驟如下：

步驟1：從Bootstrap官網(wǎng)下載最新版本的壓縮包文件bootstrap-4.5.0-dist.zip，解壓后從中找到bootstrap.min.css文件和bootstrap.bundle.min.js文件，并分別保存到本地項(xiàng)目文件夾中的css文件夾和js文件夾中。從jQuery官網(wǎng)下載最新版本的jquery壓縮文件，并保存到前面提到的js文件夾中。

步驟2：在html文件中引入步驟1下載的bootstrap.min.css文件、bootstrap.bundle.min.js文件和jquery-3.4.1.min.js文件，css文件放在標(biāo)簽之間，js文件則放到頁面尾部且在 標(biāo)簽之前即可起作用。需要特別注意的是，兩個(gè)js文件之間的順序是： jQuery 必須排在前面，然后才是bootstrap.bundle.min.js插件。

2.2 Swiper

Swiper是一個(gè)開源而小巧的JS框架，它支持移動(dòng)終端的觸摸滑動(dòng)，如果設(shè)備支持的話，它還能夠使用終端硬件加速過渡效果。Swiper主要是面向蘋果操作系統(tǒng)的，但也支持安卓和Windows 8以上的系統(tǒng)。Swiper目前已經(jīng)更新到6.1.1版，由于3.0以后的版本不再考慮對電腦端的兼容問題，所以，如果開發(fā)者想兼容IE7及之前的PC端瀏覽器，就只能選擇Swiper2.x的版本。Swiper完全開源（MIT Licensed），無論是個(gè)人網(wǎng)站還是商業(yè)網(wǎng)站使用都無須付費(fèi)[7]。

使用Swiper制作圖2中的輪播圖的步驟如下：

步驟1：從Swiper官網(wǎng)下載最新版本的壓縮包swiper-6.1.1.zip，解壓后從中找到swiper-bundle.min.css文件和swiper-bundle.min.js文件，并分別保存到本地項(xiàng)目文件夾中的css文件夾和js文件夾中。

步驟2：在html文件中引入步驟1下載的swiper-bundle.min.css文件和swiper-bundle.min.js文件，前者放在標(biāo)簽之間，后者放在頁面尾部且在 標(biāo)簽之前。

至此，Swiper版本的輪播圖制作完畢。用Swiper制作的輪播圖在電腦上可以用鼠標(biāo)左右滑動(dòng)來切換圖片，在移動(dòng)端還可以用手指觸摸左右滑動(dòng)來切換圖片，功能比較強(qiáng)大。

2.3 myFocus

myFocus是一個(gè)專門用來制作Web端焦點(diǎn)圖的開源JavaScript庫。它使用原生的JavaScript編寫，獨(dú)立無依賴，性能卓越，同樣效果比jQuery更流暢。我們可以使用myFocus輕松制作各種焦點(diǎn)圖，而且這樣制作的焦點(diǎn)圖體積小（最新的2.0版不到10k），功能強(qiáng)（集成了30多種風(fēng)格的圖片切換效果），運(yùn)行效率高（兼容ie6+和所有的主流瀏覽器）[8]。最重要的一點(diǎn)是，myFocus使用起來十分簡單方便，擁有傻瓜式的API接口和標(biāo)準(zhǔn)的HTML結(jié)構(gòu)布局，可以瞬間切換輪播圖的風(fēng)格，同時(shí)也支持開發(fā)人員自定義擴(kuò)展開發(fā)。

使用myFocus制作圖2中的輪播圖的步驟如下：

步驟1：從網(wǎng)上下載最新版本的myFocus庫文件（myfocus-2.0.4.min.js）和風(fēng)格應(yīng)用文件（mf-pattern），并全部保存到本地項(xiàng)目文件夾中的js文件夾中。

通過上面三種輪播圖的制作我們可以看出：Bootstrap可以制作簡單通用的輪播圖，并能配合Bootstrap系統(tǒng)做到多屏適用。Swiper是最近比較火的一枝獨(dú)秀，功能強(qiáng)大，樣式豐富，官方網(wǎng)站上也有豐富的輪播圖案例供用戶免費(fèi)下載使用。myFocus是一個(gè)小家碧玉，圖片切換效果比較絢麗，體積較小，使用起來也方便快捷。三種軟件各有各的優(yōu)點(diǎn)，網(wǎng)站開發(fā)者可以根據(jù)自己的具體需求選擇合適的開發(fā)框架。

3 結(jié)束語

互聯(lián)網(wǎng)時(shí)代，網(wǎng)站信息的展示方式將極大地影響信息的傳遞效率和用戶的體驗(yàn)效果。輪播圖能夠利用有限的網(wǎng)頁空間展示更多的信息內(nèi)容，并且更具觀賞性，因而被廣泛使用，也提升了用戶體驗(yàn)。本文介紹了利用Bootstrap、Swiper、myFocus 3種開源框架制作輪播圖的簡易方法，這些方法操作簡單、功能強(qiáng)大、效果絢麗，希望能夠?yàn)榫W(wǎng)站開發(fā)人員制作輪播圖提供借鑒。

參考文獻(xiàn)：

[1] 羅才華.一種基于原生JavaScript的焦點(diǎn)輪播圖簡易實(shí)現(xiàn)[J].南方職業(yè)教育學(xué)刊，2019，9（3）：103-109.

[2] 李新榮.運(yùn)用CSS3和JQuery對電商網(wǎng)站焦點(diǎn)圖輪展效果技術(shù)的實(shí)現(xiàn)[J].品牌，2015（3）：40，43.

[3] 龔麗.網(wǎng)頁中輪播圖的實(shí)現(xiàn)方法探討[J].電腦知識(shí)與技術(shù)，2017，13（31）：273-274，281.

[4] Bootstrap中文網(wǎng)[EB/OL].[2020-08-22].https：//www.bootcss.com/.

[5] 傅翠玉，王少茹，洪秀金.Bootstrap框架在響應(yīng)式WEB開發(fā)中的應(yīng)用[J].電腦知識(shí)與技術(shù)，2018，14（21）：85-86.

[6] 楊萃潔.Bootstrap響應(yīng)式設(shè)計(jì)在服務(wù)高校師生信息發(fā)布平臺(tái)開發(fā)中的應(yīng)用實(shí)踐探究[J].教育現(xiàn)代化，2019，6（25）：111-114，124.

[7] Swiper 中文網(wǎng)[EB/OL].[2020-08-10].https：//swiper.com.cn/.

[8] 趙鋒.基于MyFocus制作網(wǎng)頁焦點(diǎn)圖的實(shí)現(xiàn)方法[J].淮北職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2015，14（4）：140-141.

[9] myFocus JS焦點(diǎn)圖庫v2.0.1穩(wěn)定版[EB/OL].[2020-08-13]. http：//demo.jb51.net/js/myfocus/demo.html.

【通聯(lián)編輯：謝媛媛】