左邊這種動態(tài)切換效果，具有二十三種切換樣式，并不是用動畫軟件制作的動畫，而是用javascript制作出來的效果，是不是有點出乎你的意料。更值得一看的是它只用了廖廖幾行程序代碼，且變換的圖片數(shù)量可以隨意增加卻不增加程序代碼。你感到奇怪嗎？繼續(xù)往下看你就明白了。

制作思路：給插入的圖片加上一個ID（img1)號，以便 javascript程序?qū)ζ洳僮�，再給圖片加載一個CSS的動態(tài)濾鏡revealTrans，然后用一小段javascript程序定時不斷地改變revealTrans濾鏡的Transition參數(shù)值以獲得不斷地更換切換樣式，同時通過程序不斷地改變圖像標(biāo)記的“src”（圖片的地址）參數(shù)值，以獲得來更換圖片的效果。

制作方法：

1、在網(wǎng)頁中插入一張圖片，給圖片加上ID號為：img1，若改變ID號，那么在程序中也要作相應(yīng)改變。再給圖片加載一個revealTrans濾鏡，完成后的圖像標(biāo)記的完整代碼如下：

濾鏡中的Duration是控制切換時間（以秒計）的，本例設(shè)置的是1.5秒，若想使切換過程慢一些，可加大Duration參數(shù)的值。

2、在網(wǎng)頁源代碼的與之間插入下面這段javascript程序代碼：



若要讓圖片在切換后停留的時間長一點，可加大定時函數(shù)setTimeout中的定時數(shù)值（以毫秒計）。

3、在網(wǎng)頁源代碼的標(biāo)記中加上onload="start()"事件，以使得在網(wǎng)頁載入時就顯示動態(tài)切換效果。

至此，制作結(jié)束。是不是一點都不難？！但在實際制作應(yīng)注意以下幾點：
1、所有圖片的文件名和文件格式要統(tǒng)一，用序號區(qū)分，如本例所用圖片的文件名（含相對路徑）為：Https://img20.5n6.cn/orange/image/2010/11/08/20240920165****06367.jpg、upfiles/cssp2.jpg、upfiles/cssp3.jpg；
2、所有圖片的大小最好要一致。若圖片的大小不一致，雖不影響程序的運行，但在顯示時，均以插入在網(wǎng)頁上的那張圖片的大小來顯示，那么，大的圖片將縮小顯示，小的圖片放大顯示，影響效果。
3、在修改定時器函數(shù)setTimeout中的定時時間或修改CSS的revealTrans的切換時間Duration參數(shù)的值時，要使前者的時間大于后者的時間，否則，切換過程還沒有完成就又開始下一過程了，從而使人無法看清楚圖片。另外要注意，定時器是以毫秒為單位計時，而濾鏡是以秒為單位計時。