DHTML幻燈片播放程序（三）

2020-03-24 16:16:26

字體：大中小

來源：轉載

供稿：網友

下面，我要開始最為核心的部分了，就是編寫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()
本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML列表的種類

下一篇：html中的checkbox和radio事件選擇用法詳解