下面,我要開始最核心的部分了,就是寫javascript程式了。我們的想法是,可以定義一組圖片(若干張),當頁面出現時先顯示第一張圖片,並預載入第二張圖片,第一張圖片載入後5秒鐘,如果第二張圖片也載入了,我們就開始自動切換到第二張圖片,此時並預載入第三張圖片,如果5秒鐘內我們載入了第三張圖片,就自動切換到第三張圖片,如此播放下去直到最後一張又從頭開始。當然,這是自動播放的了。我們還允許用戶手動進行向前和向後的播放。
首先,我們要解決的問題是圖片的預載入,因為這決定了切換過程的流暢性和播放過程的完美性。要預先載入一幅圖片很簡單,我們只要在記憶體中新建一個圖片的實例變量,並把該變數指向一幅圖片,這樣,我們的瀏覽器便會自動載入這幅圖片的,這就是圖片的預載入。用javascript寫出來就是下面這個樣子:
var myImage = new Image()
myImage.src = "someImage.gif"
然後,我們還要知道,圖片是否載入了嗎?如果載入了,我們就顯示,如果沒載入,那麼就要出錯了。於是我們還要改一下上面的程式碼,在其中加入兩個語句,所以,這段JavaScript就變成下面的樣子了:
var img = new Image()
img.onload = doReadyImage
img.onerror = doErrorDisplay
img.src = "someImage.gif"
我們加入了圖片的onload和onerror事件,分別代表是否預載和預載出錯的事件。這兩個句語必需在img.src語句的前面。否則的話,圖片預載就會出錯。
最後就是我們的圖片切換程式了,在前面,我們複習了CSS中Filter轉換濾鏡的各種效果,這裡我們用代號為23的隨機效果,下面,是我們為在IE中這種效果所寫的JavaScript程式:
if (document.images.slideShow.filters)
{
document.images.slideShow.filters[0].Stop()
document.images.slideShow.filters[0].Apply()
// 使用隨機的轉換效果document.images.slideShow.filters.revealTrans.transition=23
}
document.images.slideShow.src = sSource
// 開始進行轉換效果的執行
if (document.images.slideShow.filters)
document.images.slideShow.filters[0].Play()