當前位置:蘿卜系統下載站 > 網頁設計教程 > 詳細頁面

DHTML幻燈片播放程序(3)

DHTML幻燈片播放程序(3)

更新時間:2020-11-25 文章作者:未知 信息來源:網絡 閱讀次數:

網站建設是指使用標識語言(markup language),通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸,最終以圖形用戶界面(GUI)的形式被用戶所瀏覽。簡單來說,網頁設計的目的就是產生網站。簡單的信息如文字,圖片(GIF,JPEG,PNG)和表格,都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。

  下面,我要開始最為核心的部分了,就是編寫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() 

大多數人在上網的時候,都會瀏覽網頁提供給我們的信息。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

亚洲嫩草影院久久精品