實用 JavaScript 程式【08】

第八篇
幻燈片網頁秀

適合程度： 初學者 一般程度 進階者 以上均宜
請按我展示看看

Javascript 原始程式碼
<HTML>
<TITLE>【電子報】網頁製作系列報導【實用 Script 程式】</TITLE>
<HEAD>
<--JavaScript由此開始-->
<SCRIPT LANGUAGE = "JavaScript">
<!--  //此內藍色文字是 JavaScript 程式碼的註解
function makeArray() {  //陣列，不會最好別動
this.length = makeArray.arguments.length;
for (var i = 0; i < this.length; i++)
this[i + 1] = makeArray.arguments[i];
}
function makeSlideShow (obj, wait, pre, url) {  //定義 SlideShow 各參數，不會最好別動
this.curText = '';
this.posit = 1;
this.word = obj;
this.length = obj.length;
this.pre = pre;
this.wait = wait;
this.url = url;
this.display = displaySlideShow;
}
function displaySlideShow() {
if (this.posit <= this.length) {
this.curText = this.word[this.posit]
outStringWord = blankFrameTop + this.pre + this.curText + blankFrameBottom;
parent.draw.location = 'javascript:parent.outStringWord';
this.posit++;
}
else top.location = this.url;
}
function displayLoop() {
if (wordIntro.posit <= wordIntro.length)
reDraw = setTimeout('displayLoop()', wordIntro.wait);
wordIntro.display();
}
//下面這段紅色括弧('     ....     ','    ....     ')內都是使用HTML語法，也是您主要任意修改的位置
var words = new makeArray ('<img src="welcome.gif"><BR>網頁研習室【電子報】',
'這是學習HomePage的好地方<BR><BR><BR>站長 李文能 在此恭迎大家',
'這篇幻燈片網頁秀<BR><BR>其實<BR><BR>只有一頁而已',
'您可使用純文字來秀<BR><BR><img src="01.gif"><BR><BR>也可使用圖檔來秀哦',
'5秒後 <BR> ><P>Let Us Go To Study Thise Page Now ......! ');
var wordIntro = new makeSlideShow (words, 5000,  //定義每頁停留(千分之一)秒數，您可配合修改
'<CENTER><BR><BR><BR><BR><BR><BR><BR><BR>
<FONT FACE="標準體" SIZE = 6>', '08-1.htm');  //定義字型、大小、轉頁到08-1.htm，您可配合修改
var blankFrameTop = '<HTML><BODY BGCOLOR = "#000000" TEXT = "#FFFFFF">';
var blankFrameBottom = '</BODY></HTML>';  HTML架構及背景顏色，您可配合修改
var blankFrame = blankFrameTop + blankFrameBottom;  //以下定義分割視窗語法，不會最好別動
document.write ('<FRAMESET onLoad = "displayLoop()" ROWS = "100%, *"');
document.write ('FRAMEBORDER = NO BORDER = 0>');
document.write ('<FRAME SCROLLING = AUTO SRC = "javascript:parent.blankFrame"');
document.write ('NAME = "draw" MARGINWIDTH = 2 MARGINHEIGHT = 2>');
document.write ('</FRAMESET>');
//-->
</SCRIPT>
<!--JavaScript 到此結束 -->
</HEAD>
<BODY>
<!!--這裡面全都空的-->
</BODY>
</HTML>

運用說明：
記得用檢視原始碼，將 07.htm 內<!--JavaScript由此開始-->這一段<!--JavaScript到此結束-->複製來用，不可直接Copy上面這一段哦。
('     ....     ','    ....     ')這段內的程式碼，不可任意段行使用，每一個   ,   表示一個畫面。
('     ....     ','    ....     ')這段內的圖檔、文字，您可使用HTML語法來配合自己需要發揮或創新。
如果您要使用圖片來秀，不是將時間 words, 5000, 調慢，就是盡量使用小圖示(3Kb以下)。
最後記得一定要改(有)這個轉場頁 08-1.htm ，否則螢幕就會停止不動了。
這個效果(類似 Flash) ，大多用於網頁開場或者進入某一主題時；妥善規劃運用，會產生很不錯的即時動態效果哦。

注意事項：
部份 NetScape Browser 版本無法正常使用。
如果您覺得本篇不錯，請將本報轉給有此需要的親朋好友，讓彼此受惠成長，謝謝您。
如果您是初學者，建議先到 JavaScript 大全 研究一番吧。

如何完整取得所有資料：
如果您想完整取得電子報內所有檔案資料，我們提供燒錄光碟片給您 Go 。
凡加入教學或教材會員者，均可獲得以下乙份完整的資料光碟。
詳細內容：語法教學、第一電子報、第二電子報、第三期電子報、網頁圖窟。

結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。