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

馬寧寧

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

關鍵詞：輪播圖;Bootstrap;Swiper;myFocus

1 輪播圖簡介

1.1 定義

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

1.2 功能作用

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

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

1.3 實現(xiàn)原理

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

2 實現(xiàn)方法

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

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

2.1 Bootstrap

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

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

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

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

2.2 Swiper

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

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

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

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

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

2.3 myFocus

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

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

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

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

3 結束語

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

參考文獻：

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

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

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

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

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

[6] 楊萃潔.Bootstrap響應式設計在服務高校師生信息發(fā)布平臺開發(fā)中的應用實踐探究[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)頁焦點圖的實現(xiàn)方法[J].淮北職業(yè)技術學院學報，2015，14（4）：140-141.

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

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