基于jQuery技術(shù)的圖片輪播效果設(shè)計(jì)

張偉龍

（重慶電子工程職業(yè)學(xué)院，重慶 401331）

基于jQuery技術(shù)的圖片輪播效果設(shè)計(jì)

張偉龍

（重慶電子工程職業(yè)學(xué)院，重慶 401331）

圖片輪播效果在互聯(lián)網(wǎng)電子商務(wù)網(wǎng)站上應(yīng)用極其廣泛。基于jQuery技術(shù)，通過(guò)調(diào)用相關(guān)庫(kù)函數(shù)，能夠?qū)崿F(xiàn)圖片自動(dòng)輪播和單擊鼠標(biāo)切換圖片的效果。基于jQuery技術(shù)的圖片輪播設(shè)計(jì)語(yǔ)句簡(jiǎn)短，易懂易學(xué)，并在多個(gè)瀏覽器平臺(tái)上進(jìn)行了測(cè)試，取得了良好效果。

圖片輪播；jQuery；CSS；網(wǎng)站設(shè)計(jì)

0 引言

隨著互聯(lián)網(wǎng)寬帶和技術(shù)應(yīng)用的快速發(fā)展以及物流和支付系統(tǒng)的完善，電子商務(wù)購(gòu)物網(wǎng)站得到了飛速發(fā)展，正在影響著千家萬(wàn)戶的生活和經(jīng)濟(jì)行為，并日益成為社會(huì)商業(yè)活動(dòng)的重要形式之一。綜觀國(guó)內(nèi)互聯(lián)網(wǎng)電子商務(wù)網(wǎng)站，淘寶、京東、當(dāng)當(dāng)?shù)壬坛蔷W(wǎng)站設(shè)計(jì)精美，尤其圖片輪播效果更是引人關(guān)注。在互聯(lián)網(wǎng)電子商務(wù)網(wǎng)站、電影網(wǎng)站以及各類商業(yè)網(wǎng)站中，往往通過(guò)大幅宣傳圖片占據(jù)首屏視覺(jué)黃金區(qū)域，達(dá)到吸引瀏覽者的目的。對(duì)于熱銷產(chǎn)品、主推產(chǎn)品、新品上架、店鋪活動(dòng)等則通過(guò)輪播方式將相關(guān)精美圖片展示給瀏覽者。現(xiàn)在基本上每個(gè)網(wǎng)站都設(shè)有自動(dòng)輪播的banner廣告圖，在沒(méi)有任何按鈕的情況下，圖片在設(shè)定的時(shí)間內(nèi)進(jìn)行自動(dòng)切換。

1 jQuery介紹

jQuery是一個(gè)JavaScript函數(shù)庫(kù)，是一個(gè)快速、簡(jiǎn)潔的JavaScript框架。其宗旨是“Write Less，Do More”，即“寫(xiě)更少的代碼，做更多的事情”。它可以簡(jiǎn)化HTML文檔元素的遍歷、事件處理、動(dòng)畫(huà)和A－jax交互以實(shí)現(xiàn)快速Web開(kāi)發(fā)，可用來(lái)改變編寫(xiě)JavaScript腳本的方式。jQuery的文檔非常豐富，支持CSS1-3的選擇器，兼容IE 6.0+、FF 2+、Safari 3.0+、Opera 9.0+、Chrome等瀏覽器。由于簡(jiǎn)單易學(xué)，jQuery很快成為當(dāng)今最為流行的JavaScript庫(kù)，并成為開(kāi)發(fā)網(wǎng)站等復(fù)雜度較低的Web應(yīng)用程序的首選JavaScript庫(kù)，并得到了大公司如微軟、Google的支持。

jQuery有幾千種豐富多彩的插件，大量有趣的擴(kuò)展和出色的社區(qū)支持彌補(bǔ)了jQuery功能較少的不足，并為jQuery提供了眾多非常有用的功能擴(kuò)展。jQuery最有特色的語(yǔ)法特點(diǎn)就是與CSS語(yǔ)法相似的選擇器，它支持CSS1到CSS3的幾乎所有選擇器，并兼容所有主流瀏覽器，這為快速訪問(wèn)DOM提供了方便。

2 基于jQuery技術(shù)的圖片輪播效果設(shè)計(jì)

本文是基于jQuery框架，以5幅圖片為例，實(shí)現(xiàn)自動(dòng)輪播以及單擊鼠標(biāo)切換圖片的效果（圖片輪播效果如圖1所示）。該實(shí)現(xiàn)效果是在網(wǎng)頁(yè)已經(jīng)布局好的前提下實(shí)現(xiàn)的。當(dāng)我們打開(kāi)網(wǎng)頁(yè)時(shí)，看到圖片在自動(dòng)切換顯示，并且每顯示一張圖片，圖片下方對(duì)應(yīng)的圖片標(biāo)號(hào)底色會(huì)變亮，其余圖片標(biāo)號(hào)底色則變暗。當(dāng)鼠標(biāo)移動(dòng)到某一個(gè)圖片標(biāo)號(hào)上時(shí)，其底色變亮，圖片停止自動(dòng)輪播，并切換到此標(biāo)號(hào)對(duì)應(yīng)的圖片。當(dāng)鼠標(biāo)離開(kāi)時(shí)，圖片標(biāo)號(hào)再次變暗，圖片進(jìn)入正常輪播狀態(tài)。當(dāng)鼠標(biāo)移動(dòng)到圖上時(shí)，輪播停止，左右兩側(cè)標(biāo)示箭頭自動(dòng)彈出，單擊標(biāo)示箭頭時(shí)，圖片切換，鼠標(biāo)移走時(shí)，標(biāo)示箭頭自動(dòng)隱藏，圖片再次進(jìn)入正常輪播狀態(tài)。單擊某個(gè)圖片時(shí)，顯示相應(yīng)鏈接網(wǎng)頁(yè)。

圖1 圖片輪播效果圖

2.1 使用HTML和CSS設(shè)置靜態(tài)圖片區(qū)域

（1）首先，用DIV標(biāo)簽設(shè)計(jì)一個(gè)圖片輪播的區(qū)域，命名為ppt。準(zhǔn)備5張圖片，大小為770px× 410px，并給圖片編號(hào)。DIV設(shè)計(jì)的圖片輪播區(qū)域大小與圖片大小一致即可，用HTML插入準(zhǔn)備好的5張圖片，默認(rèn)顯示第一張圖片。其次，圖片標(biāo)號(hào)與圖片要一一對(duì)應(yīng)，用ul和li來(lái)實(shí)現(xiàn)。在img后添加鏈接＜a href=””＞即可實(shí)現(xiàn)點(diǎn)擊圖片轉(zhuǎn)到相應(yīng)鏈接上，此處省略，主要代碼如下：

（2）利用CSS設(shè)置HTML標(biāo)記的樣式。樣式先設(shè)置DIV的大小、浮動(dòng)和相對(duì)位置，對(duì)于超出部分自動(dòng)隱藏。執(zhí)行“display：block”命令，可讓對(duì)象成為塊級(jí)元素，由于圖片是層疊狀態(tài)，所以此時(shí)只顯示第一張圖片。li的數(shù)字與圖片一一對(duì)應(yīng)，位置在圖片的右下角，背景也做了設(shè)置。通過(guò)circle_current設(shè)置當(dāng)前焦點(diǎn)圖片對(duì)應(yīng)的標(biāo)號(hào)并且背景色為亮色，失去焦點(diǎn)時(shí)背景色變暗。當(dāng)鼠標(biāo)移動(dòng)到圖片標(biāo)號(hào)上時(shí)，由#circle li：hover屬性設(shè)置背景色變亮。#pptpre和#pptnext是對(duì)左右兩側(cè)標(biāo)示箭頭設(shè)置。

2.2 使用jQuery庫(kù)函數(shù)設(shè)置圖片自動(dòng)輪播效果

圖片輪播的過(guò)程其實(shí)就是顯示當(dāng)前圖片時(shí)，隱藏其他圖片。先用hide（）方法隱身所有圖片，再用shown（）方法顯示獲取當(dāng)前焦點(diǎn)的圖片。用times設(shè)置循環(huán)變量。自動(dòng)輪播顯示，使用DOM模型中的setInterval（），此方法可按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。setInterval（）方法會(huì)不停地調(diào)用函數(shù)，直到clearInterval（）被調(diào)用或窗口被關(guān)閉。本文以1.5秒為周期，調(diào)用圖片輪播函數(shù)。自定義函數(shù)changeImage（）是自動(dòng)輪播圖片的函數(shù)。在預(yù)覽網(wǎng)頁(yè)效果時(shí)，就會(huì)發(fā)現(xiàn)每顯示一張圖片，對(duì)應(yīng)的圖片標(biāo)號(hào)背景色變亮，圖片顯示完成后，標(biāo)號(hào)也會(huì)隨之變暗。

2.3 使用鼠標(biāo)改變圖片顯示效果

（1）當(dāng)鼠標(biāo)進(jìn)入圖片區(qū)域，圖片停止輪播，當(dāng)鼠標(biāo)移動(dòng)到某個(gè)圖片標(biāo)號(hào)時(shí)，標(biāo)號(hào)變紅，并顯示當(dāng)前標(biāo)號(hào)的圖片，即手動(dòng)顯示圖片。each（）方法為每個(gè)匹配元素規(guī)定運(yùn)行的函數(shù)，each（）函數(shù)封裝了十分強(qiáng)大的遍歷功能，使用也很方便，它可以遍歷一維數(shù)組、多維數(shù)組、DOM、JSON等。$（"#circleli"）. each（function（index）可以遍歷li圖片標(biāo)號(hào)，當(dāng)鼠標(biāo)在此圖片標(biāo)號(hào)上時(shí)，使用$（this）.addClass（"circle_current"）獲取，再通過(guò)$（".ppt img：eq（"+index+"）"）.show（）顯示對(duì)應(yīng)的圖片，其代碼如下：

（2）當(dāng)鼠標(biāo)進(jìn)入圖片區(qū)域，左右兩側(cè)標(biāo)示箭頭緩慢移出，單擊左側(cè)標(biāo)示箭頭，圖片和圖片標(biāo)號(hào)向前移動(dòng)一位，反之向后移動(dòng)；當(dāng)鼠標(biāo)離開(kāi)圖片區(qū)域，左右兩側(cè)標(biāo)示箭頭緩慢隱藏。animate（）方法執(zhí)行CSS屬性集的自定義動(dòng)畫(huà)，該方法通過(guò)CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。其主要代碼如下：

3 結(jié)語(yǔ)

本文主要介紹了基于jQuery庫(kù)中相關(guān)函數(shù)的調(diào)用，改變CSS樣式，實(shí)現(xiàn)圖片輪播效果和單擊鼠標(biāo)切換圖片效果。與JavaScript技術(shù)設(shè)計(jì)的圖片輪播效果相比，代碼更為簡(jiǎn)短，功能更為齊全。基于jQuery技術(shù)設(shè)計(jì)的圖片輪播功能具有良好的穩(wěn)定性和兼容性，在IE6+、火狐等瀏覽器中均可正常使用。

［1］吳瑞紅，張環(huán)沖.淺談JavaScript庫(kù)［J］.科技信息，2010（9）.

［2］朱育發(fā)．jQuery與jQuery Mobile開(kāi)發(fā)完全技術(shù)寶典［M］.北京：中國(guó)鐵道出版社，2014.

［3］石磊.基于jq的寬幅圖片切換設(shè)計(jì)與實(shí)現(xiàn)［J］.學(xué)科教育，2016（24）.

［4］高云．jQuery技術(shù)內(nèi)幕：深入解析jQuery架構(gòu)設(shè)計(jì)與實(shí)現(xiàn)原理［M］.北京：機(jī)械工業(yè)出版社，2014.

The design of picture carousel effect based on jQuery

ZHANG Wei-long (Chongqing College of Electronic Engineering,Chongqing 401331,China)

The application of picture carousel effect in the Internet e-commerce website is extremely wide,based on jQuery technology,by calling the related library functions;it can realize the automatic image carousel effect and switch by a click the mouse.The picture carousel design based on jQuery is brief and easy to learn;furthermore it has achieved good results in multiple browsers.

jQuery;CSS;Picture carousel;Website design

TP391.7

A

1673-2022（2017）01-0049-03

2016－10－20

張偉龍(1981-)，男，河北石家莊人，副教授，碩士，主要研究領(lǐng)域?yàn)楝F(xiàn)代無(wú)線通信技術(shù)、WEB應(yīng)用開(kāi)發(fā)。