周芷儀，陳 婷

?

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

周芷儀，陳 婷

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

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

HTML；CSS；JavaScript；輪播圖；web頁(yè)面

0 引言

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

1 輪播圖原理

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

2 輪播圖效果概述

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

3 編程語(yǔ)言介紹

3.1 HTML+CSS技術(shù)

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

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

3.2 JavaScript技術(shù)

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

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

4.1 HTML布局

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

4.2 CSS樣式

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

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

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

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

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

4.3 JavaScript實(shí)現(xiàn)

5 結(jié)語(yǔ)

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

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

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

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

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

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

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

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

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

[7] 陳月, 秦福建. Web前端開(kāi)發(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)頁(yè)中實(shí)現(xiàn)圖片輪播圖效果的方法[J]. 軟件，2018，39（10）：187-191