淺談網頁中實現圖片輪播圖效果的方法

周芷儀，陳 婷

?

淺談網頁中實現圖片輪播圖效果的方法

周芷儀，陳 婷

（昆明理工大學機電工程學院，云南 昆明 650504）

在互聯網迅速發展的時代，對于web頁面的效果要求也有增無減。輪播圖因其在有限的網頁空間中能盡可能多的展示信息而被廣泛使用，使得網頁更具有觀賞性和可讀價值，也使得用戶體驗得以提升。web端的各大網站以及基于B/S模式的瀏覽器窗口的前端實現都少不了HTML、CSS以及JavaScript這三大件的支持。本文用HTML語言實現頁面布局，CSS實現樣式設置，JavaScript腳本語言實現動畫。在JavaScript設置的函數中，利用了定時器來控制圖片變化的時間間隔，定時器中的函數用來設置圖片透明度的漸進變化以及圖片輪轉播放效果。

HTML；CSS；JavaScript；輪播圖；web頁面

0 引言

Web技術是展現網頁形態的主要技術手段，對網絡環境的信息開發展現出重要的作用，而其工作的狀況，對互聯網用戶的信息傳輸和獲得服務的體驗產生一定的影響，進而對整個信息環境價值的實現和整個社會的各項經濟活動的展開具有一定的促進作用。如今無論是在傳統的PC端還是移動端，Web技術在眾多領域中都有著重要的作用。隨著Web技術的不斷進步和網頁技術普及，各式各樣的Web設計將受到越來越多的Web設計師的青睞[1]。在Web頁面的各種效果中，輪播圖效果的使用程度非常高。輪播圖是指在電腦瀏覽器中通過鼠標點擊，觸屏設備中通過手指滑動，或設置定時器等方式使得數張圖片在同一個位置有規律地滾動播放。用戶可在一定時間內，在網頁的同一個位置瀏覽到若干圖片信息。輪播圖因其在有限的網頁空間中能盡可能多的展示信息而被廣泛使用，例如眾多電商網站利用這樣的網頁效果在固定頁面中打出更多的廣告等。輪播圖使得網頁更具有觀賞性和可讀價值，也使得用戶體驗得以提升。本文利用HTML、CSS、JavaScript三大語言支柱，完成整個輪播圖從布局到運行的總體實現。其中HTML搭建總體框架，CSS用來控制網頁外觀的規則，增加網頁的多種外觀效果，包括透明、陰影等，吸引更多體驗用戶進行訪問，JavaScript則是可以輔助用戶得到更好的畫面效果，同時保證代碼和內容的分離。一直以來 Javascript語言已經是前端技術的核心語言。并且，近些年Javascript開發服務器端程序也被企業廣泛的應用[2]。有了這三者相輔相成的支持，本文輪播圖代碼得以理想地實現。

1 輪播圖原理

將要顯示的圖片依次作為無序列表的列表項，通過CSS樣式使所有圖片在同一區域內重疊放置。在JavaScript函數的設計中，通過z-index 屬性設置圖片的堆疊順序，使擁有更高堆疊順序的圖片總是會處于堆疊順序較低圖片的前面。通過控制當前圖片的透明度來實現變換效果，當圖片的透明度由1變為0時，當前圖片消失，層疊在下一張的圖片自動出現。增加定時器，設置每隔指定時間調用函數，保證圖片輪轉效果自動進行下去。用CSS樣式設置鼠標懸停效果，使得鼠標進入圖片時出現方向按鈕。點擊方向按鈕時，觸發onclick事件調用JavaScript函數，令當前圖片的透明度變為0且上一張或下一張圖片透明度為1，從而實現手動控制圖片播放方向。

2 輪播圖效果概述

圖片以透明度逐漸變小的方式顯示下一張，最后一張圖片播放結束后自動顯示第一張，達到輪播的效果。鼠標放在圖片上時停止輪播，且在圖片水平兩端出現向左及向右的箭頭。鼠標放在任意箭頭上，箭頭部分的背景顏色加深，點擊箭頭會令圖片隨相應方向的次序依次變換。當鼠標移開時，圖片繼續從當前位置輪播。圖片底部有一排圓圈按鈕，其個數與圖片總數目一致。當前顯示第幾張圖片，相應第幾個按鈕就會亮起，其他按鈕則為黑色，即按鈕的樣式隨圖片同步輪轉變化。

3 編程語言介紹

3.1 HTML+CSS技術

HTML為超文本標記語言（Hyper Text Markup Language）。“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。超級文本標記語言是標準通用標記語言下的一個應用，也是一種規范，一種標準，它通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容。

CSS為層疊樣式表（Cascading Style Sheets）是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

3.2 JavaScript技術

JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。用來給HTML網頁增加動態功能。JavaScript是一種屬于網絡的腳本語言,已經被廣泛用于Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。本文所用到的JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。

4 輪播圖具體實現

4.1 HTML布局

本文以四張圖片輪播為例，將每張圖片的地址作為列表項內容放入無序列表中。方向按鈕為<、>符號，形象表示圖片變換方向，放入鏈接標簽中，CSS類名為type。設置div容器，名稱為buttons，用于存放跟隨圖片同步輪轉的圓形按鈕。按鈕用標簽表示，CSS類名為on。以上所用元素都放在一個大的div容器中，名稱為banner。

4.2 CSS樣式

對于無序列表標簽，設置list-style: none屬性，即消除列表樣式。在列表項標簽的屬性設置中，position: absolute用來定位于相對于包含它的元素的指定坐標；列表項元素與瀏覽器的上邊界與左邊界的間隔為0，元素的寬、高均為100像素。

控制圖片方向的按鈕類名為type，在CSS中用類選擇器定義其樣式。其中cursor: pointer用來定義鼠標放在按鈕區域上時光標呈現為指示鏈接的指針（一只手），display: none定義了按鈕區域不會被顯示。行間的距離為20像素，寬度為20像素，元素居中顯示，大小為15像素并且加粗顯示。position: absolute將元素的定位類型設為相對定位，即相對于所在的div容器進行定位，相對于容器頂部距離90像素。z-index設置元素的堆疊順序，擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。z-index：2則將按鈕圖片的起始堆疊順序定義為2。background-color: RGBA(0,0,0,.3)，按鈕區域的背景顏色為黑色且透明度為0.3，color: #fff定義按鈕區域中的元素顏色為白色。在.type:hover{}中設定鼠標懸停屬性，其中定義了鼠標放在按鈕上時按鈕區域背景顏色為黑色且透明度變為0.7。

總div容器的id名為banner，在CSS中用id選擇器定義鼠標在div上的懸停效果。#banner: hover. type { display: block;}則實現了鼠標放在圖片上后，原本沒有出現的方向按鈕就會出現。左右方向圖片id名分別為lef、rig，#lef { left: 10px;}，#rig { right: 10px;}分別實現圖片按鈕相對于div容器左邊距10像素以及右邊距10像素。

用id選擇器#buttons{}設置跟隨圖片同步輪轉的圓形按鈕所在的div。將該div容器設置為相對定位，高度為10像素，寬度為100像素，堆疊順序為2，左邊距為80像素，下邊距為3像素。#buttons span{} id選擇器用來設置標簽屬性，將元素的寬高均設為10像素，四個角都設為圓角邊框，即元素設為圓形。添加鼠標指示鏈接的指針效果，float: left設置向左浮動，保證四個標簽中的元素位列一排。背景顏色設為#333，右外邊距為5像素。

最后，通過#buttons .on{}設置class名為on的標簽背景顏色為aquamarine。

4.3 JavaScript實現

5 結語

本文用HTML語言實現頁面布局，CSS實現樣式設置，JavaScript腳本語言實現動畫。在JavaScript設置的函數中，利用了定時器來控制圖片變化的時間間隔，定時器中的函數用來設置圖片透明度的漸進變化以及圖片輪轉播放效果。另外添加控制圖片方向的按鈕，以及鼠標控制事件，也為輪播效果增添亮點。

作為已經被廣泛應用于web開發的腳本語言JavaScript，可用于在網頁中添加各種動態樣式，從而在瀏覽器中達到更加流暢精美的用戶體驗，并且在實現動態網頁效果以及web訪問者間的交互。從面向對象的角度來看，JavaScript 是一種純面向對象的語言，甚至函數本身也是對象；但同時又具有一些其特有的語言特性，如動態類型、無類動態對象、原型繼承、閉包、函數式編程等。

在互聯網飛速發展的信息環境下，對于網頁的瀏覽效果的要求也是有增無減。web端的各大網站以及基于B/S模式的瀏覽器窗口的前端實現都少不了HTML、CSS以及JavaScript這三大件的支持。正是有了這三部分的布局，增添樣式以及設置特效，再加上逐步流行的各種框架和庫，使得網頁的設計和實現日趨新穎并更有挑戰，對于未來的前端開發要求更是越來越高。

[1] 臧進進, 鄂海紅. 基于響應式 Web 設計的網頁生成系統研究與實現[J]. 軟件, 2015, 36(6): 37-41

[2] 榮艷冬. 以崗位需求為導向的Javascript課程構建[J]. 軟件, 2015, 36(06): 18-20.

[3] 龔麗. 網頁中輪播圖的實現方法探討[J]. 電腦知識與技術, 2017, 13(31): 273-274+281

[4] 李軼. 基于JavaScript的面向對象程序設計研究[J]. 江漢大學學報(自然科學版), 2010, 38(03): 52-56.

[5] 鄭俊生, 姜敏. 一種基于Div+CSS+JavaScript的網頁布局特效研究[J]. 電腦知識與技術, 2008(17): 1556-1558.

[6] 閆志英. 淺析Web前端開發技術[J]. 無線互聯科技, 2016(02): 47-48.

[7] 陳月, 秦福建. Web前端開發技術以及優化方向探究[J]. 信息與電腦(理論版), 2016(04): 35+37.

[8] Jeremy Keith, Jeffrey Sambells. JavaScript DOM編程藝術[M]. 北京: 人民郵電出版社, 2011: 1-3.

Talking About How to Achieve the Effect of Picture Rotation Chart in Webpage

ZHOU Zhi-yi, CHEN Ting

(College of Mechanical and Electrical Engineering, Kunming University of Science & Technology, Kunming 650500, China)

In the era of rapid development of Internet, the effect of web pages is increasing. Rotation map is widely used because it can display as much information as possible in the limited web space, making the web page more ornamental and readable, and also making the user experience to improve. HTML, CSS and JavaScript are essential to the front-end implementation of Web sites and browser windows based on B/S mode. In this paper, HTML language to achieve page layout, CSS to achieve style settings, JavaScript scripting language to achieve animation. In the function set in JavaScript, the timer is used to control the time interval of picture changes, and the timer function is used to set the gradual change of picture transparency and the effect of picture rotation.

HTML; CSS; JavaScript; Rotation map; Web page

TP311.1

A

10.3969/j.issn.1003-6970.2018.10.035

周芷儀（1993-），女，研究生在讀，昆明理工大學，主要研究方向：企業集成及信息化工程、電子商務與管理信息系統。

周芷儀，陳婷. 淺談網頁中實現圖片輪播圖效果的方法[J]. 軟件，2018，39（10）：187-191