DHTML幻燈片播放程序（一）

2024-04-27 13:54:21

字體：大中小

來源：轉載

供稿：網友

這是一個幻燈片播放程序，也就是一圖片輪流播放的程序。我們在一些站點上可以看見這種形式的廣告播放條，大多是用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