網頁中實現輪播圖的簡易方法探討

馬寧寧

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

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

1 輪播圖簡介

1.1 定義

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

1.2 功能作用

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

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

1.3 實現原理

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

2 實現方法

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

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

2.1 Bootstrap

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

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

步驟1：從Bootstrap官網下載最新版本的壓縮包文件bootstrap-4.5.0-dist.zip，解壓后從中找到bootstrap.min.css文件和bootstrap.bundle.min.js文件，并分別保存到本地項目文件夾中的css文件夾和js文件夾中。從jQuery官網下載最新版本的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主要是面向蘋果操作系統的，但也支持安卓和Windows 8以上的系統。Swiper目前已經更新到6.1.1版，由于3.0以后的版本不再考慮對電腦端的兼容問題，所以，如果開發者想兼容IE7及之前的PC端瀏覽器，就只能選擇Swiper2.x的版本。Swiper完全開源（MIT Licensed），無論是個人網站還是商業網站使用都無須付費[7]。

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

步驟1：從Swiper官網下載最新版本的壓縮包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輕松制作各種焦點圖，而且這樣制作的焦點圖體積小（最新的2.0版不到10k），功能強（集成了30多種風格的圖片切換效果），運行效率高（兼容ie6+和所有的主流瀏覽器）[8]。最重要的一點是，myFocus使用起來十分簡單方便，擁有傻瓜式的API接口和標準的HTML結構布局，可以瞬間切換輪播圖的風格，同時也支持開發人員自定義擴展開發。

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

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

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

3 結束語

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

參考文獻：

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

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

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

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

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

[6] 楊萃潔.Bootstrap響應式設計在服務高校師生信息發布平臺開發中的應用實踐探究[J].教育現代化，2019，6（25）：111-114，124.

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

[8] 趙鋒.基于MyFocus制作網頁焦點圖的實現方法[J].淮北職業技術學院學報，2015，14（4）：140-141.

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

【通聯編輯：謝媛媛】