淺談網(wǎng)頁中實現(xiàn)圖片輪播圖效果的方法

周芷儀，陳 婷

?

淺談網(wǎng)頁中實現(xiàn)圖片輪播圖效果的方法

周芷儀，陳 婷

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

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

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

0 引言

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

1 輪播圖原理

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

2 輪播圖效果概述

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

3 編程語言介紹

3.1 HTML+CSS技術(shù)

HTML為超文本標(biāo)記語言（Hyper Text Markup Language）?！俺谋尽本褪侵疙撁鎯?nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。超級文本標(biāo)記語言是標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用，也是一種規(guī)范，一種標(biāo)準(zhǔn)，它通過標(biāo)記符號來標(biāo)記要顯示的網(wǎng)頁中的各個部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容。

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

3.2 JavaScript技術(shù)

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

4 輪播圖具體實現(xiàn)

4.1 HTML布局

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

4.2 CSS樣式

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

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

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

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

最后，通過#buttons .on{}設(shè)置class名為on的標(biāo)簽背景顏色為aquamarine。

4.3 JavaScript實現(xiàn)

5 結(jié)語

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

作為已經(jīng)被廣泛應(yīng)用于web開發(fā)的腳本語言JavaScript，可用于在網(wǎng)頁中添加各種動態(tài)樣式，從而在瀏覽器中達到更加流暢精美的用戶體驗，并且在實現(xiàn)動態(tài)網(wǎng)頁效果以及web訪問者間的交互。從面向?qū)ο蟮慕嵌葋砜?，JavaScript 是一種純面向?qū)ο蟮恼Z言，甚至函數(shù)本身也是對象；但同時又具有一些其特有的語言特性，如動態(tài)類型、無類動態(tài)對象、原型繼承、閉包、函數(shù)式編程等。

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

[1] 臧進進, 鄂海紅. 基于響應(yīng)式 Web 設(shè)計的網(wǎng)頁生成系統(tǒng)研究與實現(xiàn)[J]. 軟件, 2015, 36(6): 37-41

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

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

[4] 李軼. 基于JavaScript的面向?qū)ο蟪绦蛟O(shè)計研究[J]. 江漢大學(xué)學(xué)報(自然科學(xué)版), 2010, 38(03): 52-56.

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

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

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

[8] Jeremy Keith, Jeffrey Sambells. JavaScript DOM編程藝術(shù)[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-），女，研究生在讀，昆明理工大學(xué)，主要研究方向：企業(yè)集成及信息化工程、電子商務(wù)與管理信息系統(tǒng)。

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