論網頁幻燈片的技術實現
2012-04-12 00:00:00郝登山沈莉
現代營銷·學苑版 2012年3期
摘要：本文結合高職計算機網頁制作課程的教學，探討了網頁幻燈片的原理及實現方法。使學生或者初學者輕松完成網頁幻燈片的技術實現。
關鍵詞：網頁幻燈片 原理 算法 程序實現
幻燈片效果的應用是網頁設計中突出重點、增強視覺趣味的有效方法。jQuery的流行使得幻燈片的實現變得十分簡單，但不適合初學者。筆者結合教學經驗，總結了適合初學者的學習方法。
一、網頁幻燈片的實現原理
網頁幻燈片的制作方式有很多，它們的制作原理并不相同。這里介紹更加簡單適合初學者的學習。步驟如下：
1.用DIV標簽布局主圖與標號圖，具體如下圖：
2.用CSS樣式表控制主圖顯示動畫效果，并控制標號圖的選中和未選中兩種顯示效果。
3.用程序控制在相應的
標簽處的插入相應的主圖，并控制標號圖顯示效果，使主圖與標號圖一致。
二、算法設計
1.用CSS布局主圖與標號圖，并設置主圖與標號圖顯示的濾鏡效果以備當圖像放入指定
標簽中的時候即顯示相應效果。
2.程序控制在網頁中插入div塊布局，用來放置主圖與標號圖，考慮到主圖是一幅一幅放入到頁面中，所以一開始插入一個空的圖像。通過一段循環語句將標號圖一次全部插入到相應的
標記中；
接下來就是插入主圖，這里考慮到主圖插入的時機有兩處，一次是按順序插入，一次是當我們點擊相應的標號即顯示主圖所以將這段代碼設置成為一個過程方便程序調用。
3.插入主圖過程如下：
⑴動畫效果前進行裝備并且播放動畫持續2秒；⑵將準備好的第一張主圖賦值給相應的
標記塊中；⑶使用循環語句將標號圖與主圖對應的標號突出顯示，其他標號圖使用濾鏡顯示40%； ⑷播放動畫效果。
4.點擊標號圖時，要結束當前主圖的濾鏡效果，并插入標號指定的主圖；
⑴當點擊標號圖時停止播放動畫效果，并將點擊的標號值作為參數傳入；⑵調用插入主圖過程。
三、程序實現
知道了網頁幻燈片這個問題的工作原理之后，并且獲取了解決該問題的語言描述（算法），當用程序實現時只需要將該語言描述用程序語言表達出來即可，具體步驟如下：
1.準備工作
準備網頁幻燈片所需素材，這里我們以3副圖形進行幻燈效果，所以需要準備3個主圖和3個標號圖。
2.用CSS布局頁面及設置主圖和標號圖的濾鏡效果，代碼如下：
3.幻燈片主程序，代碼如下：
4.插入主圖過程，代碼如下：
四、結束語
教學實踐證明，程序設計對初學者而言仍是很大的障礙，為了更加科學合理地進行教學，還需進一步研究和探討。
參考文獻：
[1]曾海.JavaScript程序設計基礎教程，人民郵電出版社，2009年10月第1版
[2]王元安，郝登山.網頁制作重慶大學出版社，2011年8月第1版
[3]陳益材，李睦芳.動態網站開發從基礎到實踐，2008年1月第1版
[4]《HTML/CSS/JavaScript標準教程》編委會.HTML/CSS/JavaScript標準教程，電子工業出版社，2008，11
