下面,我要開始最為核心的部分了,就是編寫javascript程序了。
我們的思路是,可以定義一組圖片(若干張),當(dāng)頁(yè)面出現(xiàn)時(shí)先顯示第一張圖片,并預(yù)載入第二張圖片,第一張圖片載入后5秒鐘,如果第二張圖片也載入了,我們就開始自動(dòng)切換到第二張圖片,此時(shí)并預(yù)載入第三張圖片,如果5秒鐘內(nèi)我們載入了第三張圖片,就自動(dòng)切換到第三張圖片,如此播放下去直到最后一張又從頭開始。當(dāng)然,這是自動(dòng)播放的了。我們還允許用戶手動(dòng)進(jìn)行向前和向后的播放。
首先,我們要解決的問(wèn)題是圖片的預(yù)載入,因?yàn)檫@決定了切換過(guò)程的流暢性和播放過(guò)程的完美性。要預(yù)載入一幅圖片很簡(jiǎn)單,我們只要在內(nèi)存中新建一個(gè)圖片的實(shí)例變量,并把該變量指向一幅圖片,這樣,我們的瀏覽器便會(huì)自動(dòng)載入這幅圖片的,這就是圖片的預(yù)載入。用javascript寫出來(lái)就是下面這個(gè)樣子:
var myImage = new Image()
myImage.src = "someImage.gif"
然后,我們還要知道,圖片是否載入了嗎?如果載入了,我們就顯示,如果沒(méi)載入,那么就要出錯(cuò)了。于是我們還要改一下上面的代碼,在其中加入兩條語(yǔ)句,所以,這段JavaScript就變成下面的樣子了:
var img = new Image()
img.onload = doReadyImage
img.onerror = doErrorDisplay
img.src = "someImage.gif"
我們加入了圖片的onload和onerror事件,分別代表是否預(yù)載和預(yù)載出錯(cuò)的事件。這兩條句語(yǔ)必需在img.src語(yǔ)句的前面。否則的話,圖片預(yù)載就會(huì)出錯(cuò)。
最后就是我們的圖片切換程序了,在前面,我們復(fù)習(xí)了CSS中Filter轉(zhuǎn)換濾鏡的各種效果,這里我們用代號(hào)為23的隨機(jī)效果,下面,是我們?yōu)樵贗E中這種效果所寫的JavaScript程序:
if (document.images.slideShow.filters)
{
document.images.slideShow.filters[0].Stop()
document.images.slideShow.filters[0].Apply()
// 使用隨機(jī)的轉(zhuǎn)換效果
document.images.slideShow.filters.revealTrans.transition=23
}
document.images.slideShow.src = sSource
// 開始進(jìn)行轉(zhuǎn)換效果的執(zhí)行
if (document.images.slideShow.filters)
document.images.slideShow.filters[0].Play()
如對(duì)本文有疑問(wèn),請(qǐng)?zhí)峤坏浇涣髡搲?,廣大熱心網(wǎng)友會(huì)為你解答!! 點(diǎn)擊進(jìn)入論壇