前一張	下一張

這是個很精彩的腳本。全部圖像都自動預先下載，從而确保變換順暢。並且它還有多種變換效果。

 

安裝：

步驟一  準備圖像。圖像(gif 或 jpg)數量不限，但務必使用一律的面積。.

步驟二  拷貝以下腳本後貼在有關網頁的<head>和</head>之間。

    
<script language="JavaScript1.1"> var photos=new Array() var photoslink=new Array() var which=0 photos[0]="dt1.jpg" photos[1]="dt2.jpg" photos[2]="dt3.jpg" photos[3]="dt4.jpg" var linkornot=0 photoslink[0]="" photoslink[1]="" photoslink[2]="" photoslink[3]="" var preloadedimages=new Array() for (i=0;i<photos.length;i++){ preloadedimages[i]=new Image() preloadedimages[i].src=photos[i] } function applyeffect(){ if (document.all){ photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23) photoslider.filters.revealTrans.stop() photoslider.filters.revealTrans.apply() } } function playeffect(){ if (document.all) photoslider.filters.revealTrans.play() } function keeptrack(){ window.status="Image "+(which+1)+" of "+photos.length } function backward(){ if (which>0){ which-- applyeffect() document.images.photoslider.src=photos[which] playeffect() keeptrack() } } function forward(){ if (which<photos.length-1){ which++ applyeffect() document.images.photoslider.src=photos[which] playeffect() keeptrack() } } function transport(){ window.location=photoslink[which] } </script>

步驟三  找出腳本中的如下部分：

photos[0]="dt1.jpg"
photos[1]="dt2.jpg"
photos[2]="dt3.jpg"
photos[3]="dt4.jpg"

更換為自己的圖像名稱。您可順序增加更多圖像。比如增加“dt5.jpg”像這樣：

photos[4]="dt5.jpg"

步驟四  找出腳本中的如下部分：

photoslink[0]=""
photoslink[1]=""
photoslink[2]=""
photoslink[3]=""

在引號之間鍵入路徑，便可以鏈接到其他網頁或圖像。比如photoslink[0]="1.html"變包含了photos[0]="dt1.jpg"圖像的鏈接路徑。

步驟五  拷貝以下代碼貼於有關網頁的 BODY 範圍內您需要展示幻燈機的部位。

    
<center> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%" colspan="2" height="22"><center> <script> if (linkornot==1) document.write('<a href="javascript:transport()">') document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0>') if (linkornot==1) document.write('</a>') </script> </center></td> </tr> <tr> <td width="50%" height="21"><p align="left"><a href="#" onClick="backward();return false">Previous Slide</a></td> <td width="50%" height="21"><p align="right"><a href="#" onClick="forward();return false">Next Slide</a></td> </tr> </table> </center>