- 本文介紹的這種動態切換圖片效果，具有二十三種切換樣式，並不是用動畫軟件製作的動畫，而是用Javascript製作出來的效果，是不是有點出乎你的意料。更值得一看的是它只用了廖廖幾行程序代碼，且變換的圖片數量可以隨意增加卻不增加程序代碼。你感到奇怪嗎？繼續往下看你就明白了。
- 製作思路：
- 給插入的圖片加上一個ID（img1)號，以便 Javascript程序對其操作，再給圖片加載一個CSS的動態濾鏡revealTrans，然後用一小段Javascript程序定時不斷地改變revealTrans濾鏡的Transition參數值以獲得不斷地更換切換樣式，同時通過程序不斷地改變圖像標記<img>的“src”（圖片的地址）參數值，以獲得更換圖片的效果。
- 製作方法：
- 1、在網頁中插入一張圖片，給圖片加上ID號爲：img1，若改變ID號，那麼在程序中也要作相應改變。再給圖片加載一個revealTrans濾鏡，完成後的圖像標記<img>的完整代碼如下：
- <img id="img1" src="image/cssp1.jpg" width="200" height="134" style="filter:revealTrans(Transition=1,Duration=1.5)" >
- 濾鏡中的Duration是控制切換時間（以秒計）的，本例設置的是1.5秒，若想使切換過程慢一些，可加大Duration參數的值。
- 2、在網頁源代碼的<head>與</head>之間插入下面這段Javascript程序代碼：
- <script language="JavaScript">
- <!--
- var k=0; //聲明一個計數器變量
- var imgname1="image/cssp"; //所有圖片地址的前面相同的部分，要根據實際修改這個值。
- var imgname2=".jpg"; //圖片的文件格式，可根據實際情修改，前面那個小點不要漏了。
- var imgnub=3; //要展示的圖片的張數，根據實際修改此值。
- function start(){ //程序主體部分
- obj=eval("img1"); //若圖像標記的ID號改變，請修改括號中的字符串值。
- if (obj.filters.item(0).Transition==23) // 這部分語句是用於改變切換樣式，在23種樣式中循環。
- obj.filters.item(0).Transition=1;
- else
- obj.filters.item(0).transition++;
- obj.filters.item(0).Apply();
- if (k<imgnub) {k++; //這部分語句用於改變圖像標記的src的圖片地址（既含路徑的文件名）。
- }else {k=1;
- }
- obj.src=imgname1+k+imgname2;
- obj.filters.item(0).Play();
- setTimeout("start(1)",3000); //每三秒鐘刷新一次。
- }
- -->
- </script>
- 若要讓圖片在切換後停留的時間長一點，可加大定時函數setTimeout中的定時數值（以毫秒計）。
- 3、在網頁源代碼的<body>標記中加上onload="start()"事件，以使得在網頁載入時就顯示動態切換效果。
- 至此，製作結束。是不是一點都不難？！但在實際製作時應注意以下幾點：
- 1、所有圖片的文件名和文件格式要統一，用序號區分，如本例所用圖片的文件名（含相對路徑）爲：image/cssp1.jpg、image/cssp2.jpg、image/cssp3.jpg；
- 2、所有圖片的大小最好要一致。若圖片的大小不一致，雖不影響程序的運行，但在顯示時，均以插入在網頁上的那張圖片的大小來顯示，那麼，大的圖片將縮小顯示，小的圖片放大顯示，影響效果。
- 3、在修改定時器函數setTimeout中的定時時間或修改CSS的revealTrans的切換時間Duration參數的值時，要使前者的時間大於後者的時間，否則，切換過程還沒有完成就又開始下一過程了，從而使人無法看清楚圖片。另外要注意，定時器是以毫秒爲單位計時，而濾鏡是以秒爲單位計時。