Javascript: 幻燈片效果


約瑟 發表



寫到這裡, 我在想我該寫的都寫完了。接下來幾個單元大概就是教您如何把之前學的東西並在一起寫出程式吧。 我們這單元是關於幻燈片效果的程式, 我們一起來看看吧!

在看程式的期間, 我希望你們能看看程式的寫法, 哪裡是關鍵指令, 試試看自己用另種類似或更好的方式寫寫看。
在這程式, 我們是用Ifvariable, 沒什麼新玩意。。。看看就知道了。



STEP1:【程式範例】
  1. 以下是程式碼:

    <HTML>
    <HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    var num=1
    img1 = new Image ()
    img1.src = "examples/javascript/18pic1.jpg";
    img2 = new Image ()
    img2.src = "examples/javascript/18pic2.jpg";
    img3 = new Image ()
    img3.src = "examples/javascript/18pic3.jpg";
    function slideshow()
    {
    num=num+1
    if (num==4)
    {num=1}
    document.mypic.src=eval("img"+num+".src")
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <CENTER>
    <IMG SRC="examples/javascript/18pic1.jpg" NAME="mypic" BORDER=0>
    <p>

    <A HREF="JavaScript:slideshow()">
    下一張圖</A>
    </CENTER>
    </BODY>
    </HTML>
  2. 執行結果如下:

    按一下這裡



STEP2:【程式說明】
  1. 我們先分成兩部分看:

    <HTML>
    <HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    var num=1
    img1 = new Image ()
    img1.src = "examples/javascript/18pic1.jpg"
    img2 = new Image ()
    img2.src = "examples/javascript/18pic2.jpg"
    img3 = new Image ()
    img3.src = "examples/javascript/18pic3.jpg"

  2. 大家有沒有發現到, num=1 不在 function 裡面。事實上, 以上所有東西都不在function 裡面。 在這裡, num 是一個 variable。而當我們在程式最前面就宣告這個variable時, num 就變成一個 global variable, 意指它可以被任何在它之下的 function 所使用。
  3. img1 = new Image() 宣告了一個新的圖檔物件。 img1.src= 定義了存在圖檔物件裡面的圖片。 這是一種標準的寫法。當你想要做一連串的圖片時, 你就該用這種寫法。18pic1.jpg 是存在 img1.src 18pic2.jpg是存在img2.src
  4. 括號可放進去圖片的寬和高。雖然這不是必要的, 但是這樣圖片會讀比較快。你不用也沒關係。
  5. 所有圖檔物件也都可以給任何在它下面的 function 所使用。就像是 num, 它們都是在function外面。 當程式在運作時, 它會先讀完你放在裡面的圖片。在做動畫時會更注重在先讀的寫法, 你總不能叫訪客在看動畫時一個檔案慢慢讀吧, 一定要一起讀完, 一起放才能叫動畫, 不是嗎?
  6. 接下來是第二部份:

    function slideshow()
    {
    num=num+1
    if (num==4)
    {num=1}
    document.mypic.src=eval("img"+num+".src")
    }
    </SCRIPT>
    </HEAD>
    <BODY>

  7. num一開始的預設質是 "1"。當訪客選下一張圖, function slideshow就開始跑了。
  8. slideshow() 每跑一次就會加 "1" 在 num 上。document.mypic.src 會被換成img加上value的質。比如說, 當num=1, document.mypic.src就會變成 img1.src.
  9. 注意是eval()導致 img1.src變成 img1.src 裡面的圖片。
  10. 最後, 以下的碼是成現整個程式用的:

    <a href="JavaScript:slideshow()">下一張圖</a>

最後更新日期: 10/12/2001 12:02:35 PM