任何人都能將假期的照片放在自己的網(wǎng)站上，但只有最酷的網(wǎng)絡(luò)構(gòu)建者會(huì)將他們?cè)O(shè)計(jì)成一場(chǎng)幻燈片秀。而且還不是那種簡(jiǎn)單的一張照片一個(gè)HTML頁(yè)面的幻燈片，而是一個(gè)真正有動(dòng)態(tài)感的幻燈片秀，每一個(gè)影像都下載到同一個(gè)HTML頁(yè)面去。我們會(huì)教你如何使用Dynamic HTML (DHTML)和Cascading Style Sheets(CSS)去構(gòu)建專(zhuān)屬你個(gè)人的幻燈片秀，讓你的朋友、家人和同事覺(jué)得更無(wú)聊，喔不！是印象更深刻。但是記��！因?yàn)檫@種幻燈片秀是用DHTML寫(xiě)的，因此它只能在4.0或以上更新的瀏覽器版本才能看得到。
當(dāng)然嘍，這種幻燈片秀也有嚴(yán)肅的用途。只是我們現(xiàn)在還沒(méi)有想到而已。
步驟一 收集你已經(jīng)準(zhǔn)備放在網(wǎng)絡(luò)上的影像，而且將他們裁成相同的尺寸。確定尺寸范圍不超過(guò)640 x 480個(gè)像素，而且所有的相片的像素尺寸都要保持相同－－如果照片尺寸大小不定，對(duì)觀眾而言會(huì)造成視覺(jué)上的不和諧。
步驟二 在你的頁(yè)首標(biāo)簽里，你首先要做的，是在標(biāo)簽里指出使用的是CSS。在標(biāo)簽里，在你想要幻燈片出現(xiàn)的頁(yè)面設(shè)定位置，并決定一開(kāi)頭是否要以空白背景圖表現(xiàn)，或者直接秀出張幻燈片。請(qǐng)將下列程序代碼剪貼到你的頁(yè)面中，并使用你自己選擇的位置座標(biāo)：
步驟三 接下來(lái)立刻處理CSS的細(xì)節(jié)部分，還是在頁(yè)首標(biāo)簽中插入JavaScript。在var numSLides =之后，設(shè)定要秀出的幻燈片數(shù)目（別設(shè)太多，因?yàn)槊恳粡堈掌紩?huì)為網(wǎng)頁(yè)增加可觀的KB數(shù)）。我們的范例中有五張照片。以下是程序代碼：
var numSlides = 5; var currentSlide = numSlides;
步驟四 如果你想加入圖片的解釋說(shuō)明文字，可以用下列的程序代碼，將我們的說(shuō)明文字換成你自己的說(shuō)明文字：
var captionTxt = new Array(numSlides);
function setUpCaptions() { captionTxt[1] = "39號(hào)碼頭入口。" captionTxt[2] = "海獅在碼頭附近漫步。" captionTxt[3] = "小船在碼頭靠岸。" captionTxt[4] = "水底世界鯨魚(yú)壁畫(huà)。" captionTxt[5] = "海中小島或者是巖石。" }
步驟五 將這里所示的程序代碼貼到你網(wǎng)頁(yè)中的HTML文件，位置在JavaScript的說(shuō)明文字下。因?yàn)镹avigator 4.0和IE 4.0以不同的方式解讀CSS，我們的script使用對(duì)象檢測(cè)（object detection）來(lái)決定呈現(xiàn)的模式。如果呈現(xiàn)的模式是Navigator，它還是可以定義某些特定的對(duì)象，使得IE程序代碼還是有作用。另外這也是整個(gè)程序代碼的結(jié)尾，所以一定要以標(biāo)簽來(lái)作結(jié)束：
function setUp() { if (!document.all) { document.all = document; for (i=1;i numSlides) newSlide=1; document.all[("image"+newSlide)].style.visibility="visible"; document.all[("image"+currentSlide)]. style.visibility="hidden"; // 如果不要說(shuō)明文字，請(qǐng)移除下一行: document.all["captions"].document.forCaptions.captionsText. value=captionTxt[newSlide]; currentSlide = newSlide; }
//-->
注意那些靠近程序代碼結(jié)尾的注解：如果你沒(méi)有說(shuō)明文字，那么將它下面一行的文字移除。
步驟六 以關(guān)閉頁(yè)首標(biāo)簽，然后將下列的程序代碼，貼到網(wǎng)頁(yè)HTML文件中的body部分。 注意，程序代碼以個(gè)別的標(biāo)簽區(qū)分每個(gè)影像，他們和正規(guī)的格式有關(guān)聯(lián)：
Builder.com slide show!
步驟七 觀眾必須以自己的步調(diào)來(lái)點(diǎn)按幻燈片，所以你得提供他們點(diǎn)按的東西。。你可以使用簡(jiǎn)單老式的超鏈接，但是若有特殊的Previous和Next的GIF點(diǎn)選按鈕，精巧多了。樣本程序代碼是使用一個(gè)table來(lái)連接next.gif和previuos.gif：
如果你不想用GIF文件來(lái)作Previous和Next點(diǎn)選按鈕，用文字取代上面的標(biāo)簽。
步驟八 ，在輸入欲顯現(xiàn)的說(shuō)明文字。你可以隨意決定的尺寸大小，只要改變r(jià)ows=和cols=的數(shù)字即可。以下是程序代碼：
Picture caption
上一篇：
DHTML幻燈片播放程序（一）
下一篇：
腳本技術(shù)應(yīng)用ABC