DHTML幻燈片播放程式（一）
作者：Eve Cole
更新時間：2009-06-20 17:00:35
這是一個幻燈片播放程序，也就是一張圖片輪流播放的程序。我們在一些網站上可以看見這種形式的廣告播放條，大多是用CGI做的，也就是要伺服器端支援CGI程序，如ASP、PHP、Perl等。但我們這裡的實作方法無需CGI，用的僅是CSS的效果，再加上JavaScripts的控制。只要你的瀏覽器是IE 4.0以上或是Netscape 3.0以上的就可以了。只不過在這裡我們用到了CSS的Filter濾鏡效果，效果只能在IE中出現。有關CSS的Filter濾鏡效果，大家可以參考我的《CSS中Filter濾鏡詳解》，這篇文章在Yesky.com上已經發表。
好了，讓我們來做點準備。
首先，為了製作這個效果，我們首先要打幾個尺寸一樣大小的圖片，讓其輪流播放。例如，我找了下面三個88x31的圖片做為所用的圖片。
其次，讓我們再來複習CSS中Filter的圖片轉換濾鏡的知識：
CSS中的顯示轉換濾鏡
顯示轉換濾鏡提供的是一種更為多變的轉換效果，它不像混合轉換濾鏡，只提供一種淡入淡出的效果，它還提供了更多的圖片轉換效果，它的語法是：
Filter : RevealTrans ( duration = 轉換的秒數，transition=轉換類型)
大家可以看見，它有一個轉換類型的參數，這裡，它提供了24種轉換類型，我們只需指定轉換類型的代號，就可以讓圖片按特有的轉換效果進行轉換。下表就是24種轉換濾鏡的形式及其對應的代號：
| 顯示轉換 | 濾鏡的轉換形式所對應的 | 代號顯示轉換濾鏡 | 的轉換形式所 | 對應的代號
| 矩形由大至小 | 0 | 隨機溶解 | 12 |
| 矩形從小至大 | 1 | 垂直向內裂開 | 13 |
| 圓形從大至小 | 2 | 垂直向外裂開 | 14 |
| 圓形從小至大 | 3 | 水平向內裂開 | 15 |
| 向上推開 | 4 | 水平向外裂開 | 16 |
| 向下推開 | 5 | 向左下剝開 | 17 |
| 向右推開 | 6 | 向左上剝開 | 18 |
| 向左推開 | 7 | 向右下剝開 | 19 |
| 垂直形百葉窗 | 8 | 向右上剝開 | 20 |
| 水平形百葉窗 | 9 | 隨機水平細紋 | 21 |
| 水平棋盤 | 10 | 隨機垂直細紋 | 22 |
| 垂直棋盤 | 11 | 隨機選取一種特效 | 23 |
