用JavaScript實(shí)現(xiàn)Web頁(yè)的動(dòng)態(tài)切換圖片

于萬(wàn)國(guó)

（河北民族師范學(xué)院，河北 承德067000）

如今越來(lái)越多的網(wǎng)站在首頁(yè)上都會(huì)使用動(dòng)態(tài)切換圖片來(lái)展示網(wǎng)站中的一些信息，比如購(gòu)物類網(wǎng)站，在首頁(yè)上使用動(dòng)態(tài)切換圖片來(lái)展示新產(chǎn)品或熱賣產(chǎn)品。很多新聞?lì)惖木W(wǎng)站首頁(yè)使用動(dòng)態(tài)切換圖片來(lái)展示當(dāng)前新聞。如圖1中河北民族師范學(xué)院首頁(yè) （紅色框起來(lái)的部分）。本文介紹使用JavaScript如何做動(dòng)態(tài)切換圖片的效果。使得圖片既能自動(dòng)切換，又能通過(guò)手動(dòng)單擊圖片右下角的標(biāo)號(hào)，顯示相應(yīng)標(biāo)號(hào)對(duì)應(yīng)的圖片，即手動(dòng)顯示圖片。

圖1 河北民族師范學(xué)院首頁(yè)

1 實(shí)現(xiàn)效果分析

該實(shí)現(xiàn)效果是在網(wǎng)頁(yè)已經(jīng)布局好的HTML文件上實(shí)現(xiàn)的。網(wǎng)頁(yè)布局如圖2所示?，F(xiàn)要將網(wǎng)頁(yè)中產(chǎn)品展示區(qū)域 （靜態(tài)圖片）替換成動(dòng)態(tài)切換圖片展示效果，如圖3所示。即當(dāng)用戶打開(kāi)網(wǎng)頁(yè)時(shí)，圖片就開(kāi)始自動(dòng)切換顯示，并在顯示每一張圖片時(shí)，對(duì)應(yīng)的圖片標(biāo)號(hào)底色變紅，以告訴瀏覽者當(dāng)前顯示的是第幾張圖片。另外，當(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í)對(duì)應(yīng)的標(biāo)號(hào)恢復(fù)為原色，圖片從下一張開(kāi)始自動(dòng)切換顯示。再者，當(dāng)用戶點(diǎn)擊某個(gè)圖片時(shí)，顯示出相應(yīng)的鏈接網(wǎng)站。

圖2 已經(jīng)布局好的網(wǎng)頁(yè)

圖3 實(shí)現(xiàn)效果后的4張圖片的動(dòng)態(tài)切換顯示

要完成以上提到的這些功能，需要從以下幾個(gè)角度進(jìn)行實(shí)現(xiàn)：

1）四種圖片輪番在之前網(wǎng)頁(yè)中那個(gè)靜態(tài)圖片的位置切換顯示，如何將圖片插入網(wǎng)頁(yè)中？一般使用html構(gòu)造網(wǎng)頁(yè)的結(jié)構(gòu)，如果使用＜img／＞標(biāo)記的話，只能在同一個(gè)位置插入一張圖片。

2）在這一小模塊中插入標(biāo)號(hào)，并且標(biāo)號(hào)顯示在圖片的右下角。

3）當(dāng)網(wǎng)頁(yè)被打開(kāi)時(shí)，圖片就開(kāi)始自動(dòng)切換顯示，并且對(duì)應(yīng)的標(biāo)號(hào)底色變紅。

4）當(dāng)鼠標(biāo)指向某個(gè)標(biāo)號(hào)時(shí)，標(biāo)號(hào)底色變紅，停止圖片自動(dòng)顯示，顯示當(dāng)前標(biāo)號(hào)對(duì)應(yīng)的圖片。

5）當(dāng)鼠標(biāo)離開(kāi)時(shí)，標(biāo)號(hào)恢復(fù)為原來(lái)的顏色，圖片從當(dāng)前鼠標(biāo)指向的標(biāo)號(hào)的下一張開(kāi)始自動(dòng)切換顯示。

6）當(dāng)用戶點(diǎn)擊某個(gè)圖片時(shí)，顯示對(duì)應(yīng)的鏈接網(wǎng)站。

2 實(shí)現(xiàn)步驟

2.1 改變圖中靜態(tài)圖片區(qū)域

分析網(wǎng)頁(yè)結(jié)構(gòu)，網(wǎng)頁(yè)中其他部分不變，只改變圖2中靜態(tài)圖片的區(qū)域。

（1）將原來(lái)的靜態(tài)圖片部分替換掉，這里要?jiǎng)討B(tài)切換顯示4張圖片，使用HTML不能同時(shí)插入4張圖片，只能先插入1張圖片，讓其成為默認(rèn)顯示的圖片，也是起到占位的作用，之后使用JavaScript完成與其它圖片的動(dòng)態(tài)切換效果，并且其它幾張圖片的顯示位置也是在默認(rèn)圖片的位置。

（2）在圖片的右下角插入標(biāo)號(hào)，這里的標(biāo)號(hào)可以使用列表進(jìn)行插入，并使用CSS布局將其水平顯示，并進(jìn)行相應(yīng)定位，定位在圖片的右下角。

2.2 圖片自動(dòng)切換顯示

（1）當(dāng)網(wǎng)頁(yè)被打開(kāi)時(shí)，圖片就開(kāi)始自動(dòng)切換顯示，并且對(duì)應(yīng)的標(biāo)號(hào)底色變紅。既然是自動(dòng)切換顯示，首先想到BOM模型中的Set Interval（ ）方法，此方法是可以按照指定的周期 （以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式的，Set Interval（code，millisec），其中code和millisec參數(shù)都是必須要寫的，code代表要調(diào)用的函數(shù)或要執(zhí)行的代碼串，millisec代表周期性執(zhí)行或調(diào)用code之間的時(shí)間間隔，以毫秒計(jì)。這里需要編寫一個(gè)函數(shù)，能夠?qū)崿F(xiàn)圖片切換顯示，為了書寫方便給這個(gè)函數(shù)起名叫change Pic（ ）函數(shù)，此函數(shù)就作為Set Interval的第一個(gè)參數(shù)，millisec參數(shù)就設(shè)置一個(gè)毫秒數(shù)就可以了。在開(kāi)始寫這個(gè)函數(shù)前，準(zhǔn)備了4張圖片放在文件夾images里，名字分別為1.jpg，2.jpg，3.jpg，4.jpg。其中1.jpg在html代碼中已經(jīng)插入。如何能讓其自動(dòng)切換呢？首先想到for循環(huán)，for（i＝0；i＜4；i＋＋）｛document.get Elements ById（"pic"）.src＝"images／"＋i＋".jpg"；｝，其中大括號(hào)中document.get Elements ById （"pic"）語(yǔ)句段的意思是：獲得id＝”pic”的對(duì)象的引用，這里的id＝”pic”是寫在html文件中插入默認(rèn)圖片的＜img／＞標(biāo)簽里的，src屬性可設(shè)置或返回應(yīng)當(dāng)被載入框架中的文檔的URL，這里將圖片的地址賦給它，即獲得圖片對(duì)象，并且讓其顯示i.jpg，這里的i就有說(shuō)法了，能讓其使用for循環(huán)切換顯示，但是當(dāng)i＝3，即顯示第四張圖片后如何循環(huán)回來(lái)繼續(xù)顯示第一張圖片呢？可以使用判斷語(yǔ)句，當(dāng)i＝3時(shí)，i＝0重新開(kāi)始。但是有更簡(jiǎn)單的辦法。就是使用i＝i%4＋1這條語(yǔ)句來(lái)變換i的值，其中i被定義為全局變量，并附初值為0，每當(dāng)調(diào)用一次change Pic（ ）函數(shù)，i的值改變一次，而且是從1循環(huán)到1。change Pic函數(shù)實(shí)現(xiàn)了一半的功能，即可以切換顯示圖片了，如果將其作為Set Interval的參數(shù)就可以實(shí)現(xiàn)自動(dòng)切換顯示了。但還有一個(gè)問(wèn)題沒(méi)有解決，就是關(guān)于對(duì)應(yīng)標(biāo)號(hào)底色改變的問(wèn)題。在這里可以使用document.get Elements ByName （"list1"）[i－1].style.background Color＝"red"；語(yǔ)句將對(duì)應(yīng)底色變紅，其中document.get Elements ByName（"list1"）中l(wèi)ist1是列表項(xiàng)中name屬性的屬性值，document.get Elements ByName方法返回帶有指定名稱的對(duì)象的集合，之后的 [i－1].style.background Color，這條語(yǔ)句之后，可以預(yù)覽一下效果，預(yù)覽之前，在JS文件中加上window.onload＝function（ ）｛autoChange（ ）；｝這條語(yǔ)句，其中autoChange（ ）函數(shù)是自動(dòng)切換顯示圖片的函數(shù)。之后預(yù)覽網(wǎng)頁(yè)的效果，就會(huì)發(fā)現(xiàn)每顯示1張圖片對(duì)應(yīng)的標(biāo)號(hào)底色變紅沒(méi)錯(cuò)，但同時(shí)切換顯示完成之后，標(biāo)號(hào)的底色沒(méi)有恢復(fù)為原來(lái)的顏色，可以在將對(duì)應(yīng)列表項(xiàng)底色變紅之前使用同樣的方法先將所有的列表項(xiàng)設(shè)置為原來(lái)的顏色，這里的顏色值為：＃C9D6D8。這樣，第一個(gè)問(wèn)題就解決了，圖片自動(dòng)切換顯示，并且對(duì)應(yīng)的標(biāo)號(hào)底色變紅。

2.3 手動(dòng)顯示圖片

（1）接下來(lái)要解決的問(wèn)題就是：當(dāng)鼠標(biāo)指向某個(gè)標(biāo)號(hào)時(shí)，標(biāo)號(hào)底色變紅，停止圖片自動(dòng)顯示，顯示當(dāng)前標(biāo)號(hào)對(duì)應(yīng)的圖片，即手動(dòng)顯示圖片，關(guān)鍵點(diǎn)即鼠標(biāo)指向某個(gè)標(biāo)號(hào)時(shí)，對(duì)應(yīng)的圖片顯示，可以用鼠標(biāo)事件onmouseover，將手動(dòng)顯示圖片的函數(shù)show Pic（ ）作為onmouseover的值。這里的關(guān)鍵就是寫show Pic（ ）函數(shù)，此函數(shù)除了手動(dòng)顯示圖片的功能外，第一要解決的是當(dāng)執(zhí)行這個(gè)函數(shù)時(shí)先停止圖片的自動(dòng)切換顯示，如何停止圖片自動(dòng)切換顯示呢？可以用一個(gè)函數(shù)clear Interval，但需要set Interval函數(shù)傳遞給一個(gè)ID，也就是之前在寫set Interval函數(shù)時(shí)，將其賦值給某個(gè)ID值，然后將此ID傳遞給clear Interval函數(shù)。

（2）接下來(lái)要寫的就是show Pic（ ）函數(shù)，這里使用的是在html文件中的列表項(xiàng)添加超鏈接，將每一個(gè)列表項(xiàng)鏈接到對(duì)應(yīng)的圖片。然后使用document.get Attribute（“href”）方法取到每一張圖片，然后將其賦值給document.get Elements ById（“pic”），然后將此函數(shù)賦值給onmouseover事件，即當(dāng)鼠標(biāo)經(jīng)過(guò)每個(gè)列表項(xiàng)時(shí)，對(duì)應(yīng)的圖片顯示出來(lái)。還要注意的就是對(duì)應(yīng)底色變紅的問(wèn)題，跟以上方法類似，就不再贅述。還有保存當(dāng)前顯示的是第幾張圖片，這里用i來(lái)表示。因?yàn)楫?dāng)鼠標(biāo)離開(kāi)時(shí)，圖片從下一張開(kāi)始切換顯示，所以要記錄i的值。到這里基本的功能都已實(shí)現(xiàn)了。

2.4 點(diǎn)擊圖片，顯示相應(yīng)的圖片鏈接的網(wǎng)頁(yè)

點(diǎn)擊每一張圖片，鏈接到對(duì)應(yīng)的網(wǎng)頁(yè)，這個(gè)函數(shù)取名show Web（），首先需要有4個(gè)超鏈接的網(wǎng)頁(yè)，也就是需要先準(zhǔn)備4個(gè)超鏈接的URL，可以針對(duì)網(wǎng)頁(yè)中的圖片，制作4個(gè)介紹該產(chǎn)品的詳細(xì)網(wǎng)頁(yè)，這里沒(méi)有制作就使用了Baidu，Google這樣的網(wǎng)址作為鏈接的目的地址。將這4個(gè)URL存在一個(gè)數(shù)組hrefArray里，點(diǎn)擊圖片顯示相應(yīng)的超鏈接，很容易讓我們想到BOM中的location對(duì)象，可以使用window.location.href＝？，就等于數(shù)組中的某一項(xiàng)值，哪一項(xiàng)呢？就是以上保存過(guò)i的值這樣一個(gè)show－Web（）函數(shù)。但點(diǎn)擊圖片，沒(méi)有顯示相應(yīng)的超鏈接，需要在＜img／＞標(biāo)記里添加onclick事件，onclick＝showWeb（ ），＜img／＞標(biāo)記就是在html文件中插入的默認(rèn)顯示圖片，整個(gè)動(dòng)態(tài)切換圖片的效果就實(shí)現(xiàn)了。

3 總 結(jié)

在該實(shí)現(xiàn)方法中用到了JavaScript中的BOM和DOM模型，JavaScript中數(shù)組的使用以及每個(gè)自定義函數(shù)之間的關(guān)系等等。利用好這些知識(shí)點(diǎn)，就可以實(shí)現(xiàn)Web頁(yè)上更加復(fù)雜的動(dòng)態(tài)切換效果。

[1]孫良軍.HTML＋CSS＋JavaScript網(wǎng)頁(yè)設(shè)計(jì)與布局實(shí)用教程[M].北京：清華大學(xué)出版社，2011：223－226.

[2]明日科技.JavaScript從入門到精通[M].北京：清華大學(xué)出版社，2012：172－185.

[3]Timothy Boronczyk.Web開(kāi)發(fā)入門經(jīng)典[M].北京：清華大學(xué)出版社，2009：332－396.