項目二十 HTML+Javascript綜合應用
互聯網上的網站數目龐大浩瀚，很多網站上都有不少運用javascript製作出來的網頁特效，使得網頁非常的絢麗多彩。其中利用javascript製作首頁輪顯大圖切換以及產品橫向滾動效果是大多數網頁上非常常見的網頁特效。
輪顯大圖切換以及產品橫向滾動效果的存在能夠讓原本了無生趣的網頁變得風生水起，因此深受廣大站長喜愛。
教學目標
1、 Javascript文件的放置與修改；
2、 Javascript網頁特效的使用；
實踐目標
1、 掌握如何尋找互聯網上的javascript特效代碼；
2、 掌握如何使用javascript特效代碼；
一、網頁特效簡介
網頁特效是用程序代碼在網頁中實現的特殊效果或者特殊的功能的一種技術，是用網頁腳本(javascript,vbscript)來編寫製作動態特殊效果。它為網頁活躍了網頁的氣氛，有時候會起到一定的親切力。
它一般分為：時間日期類、頁面背景類、頁面特效類、圖形圖象類、按鈕特效類、鼠標事件類、Cookie腳本文本特效類、狀態欄特效代碼生成類、導航菜單類、頁面搜索類、在線測試類密碼類、技巧類、綜合類、遊戲類等等。
互聯網上很多網站都提供各式各樣的網頁特效源碼下載，我們甚至可以不用自己編寫程序就可以直接運用互聯網上現有的特效代碼來給網站實現各種豐富多彩的效果。比較有名的提供網頁特效代碼下載的網站常見的有A5源碼網站（http://down.admin5.com/）、酷站代碼（http://www.5icool.org/）、站長素材網站（http://sc.chinaz.com/jiaoben/）等等。我們只用在互聯網上搜索網頁特效的代碼並下載，然後運用到自己的網頁中即可。
在接下來任務章節中，我們將以前面製作過的正邦靜態網頁為例，向大家演示如何將互聯網上下載的javascript特效源碼運用到網頁中。
二、Javascript實現Banner部分的輪顯大圖效果
互聯網上的很多網站Banner部分都是採用輪顯大圖的效果，自動輪播圖片，甚至鼠標點擊也可以實現圖片切換效果，接下來我們將演示如何給正邦網站也實現banner輪顯大圖效果。
下圖是正邦網站首頁中截圖的一部分，其中紅線框住的部分就是我們即將用輪顯大圖效果替代的部分。圖："頭部大圖滾動JS源碼"是已經在網上下載好的輪顯大圖特效源碼。可以實現圖片的切換。
圖：Banner
圖：頭部大圖滾動JS源碼
1）打開JS源碼文件夾，可以看到裡面有數個文件，用Dreamweaver打開其中的"index.html"文件。預覽可以查看該特效效果，如下圖所示：
圖：JS特效預覽
2）複製JS源碼"index.html"中的核心代碼，粘貼到正邦網站的首頁代碼中對應部分：
3）粘貼後的正邦部分代碼如下所示：
4）由於正邦首頁中的大圖寬為890像素，高為350像素，所以這裡我們需要修改代碼中的寬度與高度屬性，分別修改為width="890" height="360" style="height:360px"，修改後如下圖所示：
5）然後再分析原JS特效頁面的index.html代碼，我們可以發現在
之間還有一段javascript代碼，因此需要把這段代碼也複製粘貼到名為"datu"的盒子裡，並且修改代碼中寬高屬性，複製和修改後的代碼如下所示：之間還有一段javascript代碼，因此需要把這段代碼也複製粘貼到名為"datu"的盒子裡，並且修改代碼中寬高屬性，複製和修改後的代碼如下所示：
HTML 源代碼：
6）繼續分析原JS特效頁面的index.html代碼，我們可以發現在
之間還有一段導入javascript文件的代碼，通過這兩行代碼將外部JS文件導入到HTML頁面鍾來，因此需要把這段代碼也複製粘貼到正邦的網頁對應的之間：
之間還有一段導入javascript文件的代碼，通過這兩行代碼將外部JS文件導入到HTML頁面鍾來，因此需要把這段代碼也複製粘貼到正邦的網頁對應的之間：
7）代碼部分修改到這裡基本上就結束了。接下來打開JS源碼的文件夾，將裡面除index.html文件以外的其他文件複製粘貼到正邦的文件夾中放在正邦首頁的同一級目錄下面，如下圖所示：
圖：複製JS源碼中的文件
圖：粘貼後的正邦目錄
8）接下來打開img文件夾，分別選擇datu.jgp、datu1.jpg、datu2.jpg、datu3.jpg，複製粘貼到images文件夾中，並修改圖片名稱分別為01.jpg、02.jpg、03.jpg、04.jpg、05.jpg。預覽頁面效果如下：
二、Javascript實現產品系列橫向滾動
無縫滾動圖片特效在網站上經常見到，可循環左右滾動，速度能自定義，可以用"無處不在"來形容它。有橫向和上下方向平滑滾動的代碼，鼠標滑過自動停止。這種特效也是前端開發常用的特效，適合在有限的空間展示更多的內容。下面將介紹如何用JS特效源碼來實現產品圖片橫向滾動的效果。效果圖如下：
圖：產品圖片橫向滾動效果
1）打開JS源碼文件夾"產品系列橫向滾動源碼"，可以看到裡面有一個名為"test.htm"的文件。預覽可以查看該特效效果，如下圖所示：
圖：產品橫向滾動特效
2）用Dreamweaver打開"test.htm"文件，複製JS源碼"test.htm"中的核心代碼（23-140行），粘貼到正邦網站的首頁代碼中對應部分（第455行之後）。然後複製"test.htm"文件中的CSS部分代碼（9-18行），粘貼到正邦首頁的CSS代碼區域：
圖：複製粘貼核心代碼
3）上圖可以看到產品橫向滾動特效與下面的產品列表沒有對齊，因此需要對該段代碼略做調整，給其加一個DIV塊，定義DIV盒子的id名為"gundong"，然後在CSS部分設置DIV的寬與高，左右自動對齊即可。如下圖所示：
圖：加DIV開始標記
圖：加IDV結束標記
圖：滾動屬性
4）調整後的JS特效部分如下圖所示：
5）觀察可發現產品滾動圖片與下面的產品列表之間的距離比較大，分析代碼可以發現設置的DIV高度是190像素，而圖片實際高只有150像素，所以接下來我們可以用自己事先準備好的arcimg文件夾中的圖片替代：
圖：更換圖片
圖：更換圖片
6）保存，預覽最終效果如下圖所示：
小結：
Banner部分圖片輪播特效以及產品圖片橫向滾動特效是網站上隨處可見的特效，可以在有限的網站頁面上呈現出更多的內容。在網站設計與製作中運用非常廣泛。在上面的案例中僅僅只是用到了兩種JS特效，在互聯網上還有很多不同效果的JS特效代碼，有興趣的同學不妨自己去下載，讓網頁變得更加豐富多彩。
項目實踐
本章節我們學習了在互聯網上下載javascript特效代碼，並運用到靜態網頁中。下面將通過讓同學們自己動手操作前面的三個案例，來熟悉和領悟javascript特效代碼的運用。
任務一：實現網頁Banner輪顯大圖效果
任務描述：
在網上下載javascript特效源碼或者使用教學中提供的源碼將正邦網站首頁的Banner大圖部分改為圖片輪播的效果。
任務要求：
1、 會下載JS特效源碼；
2、 Banner部分為五張圖片輪播；
實踐目標：
1、 熟悉javascript特效源碼的下載；
2、 熟悉javascript特效源碼的運用；
參考步驟：
(參考本章節對應的案例)
任務二：產品系列橫向滾動
任務描述：
在網上下載javascript特效源碼或者使用教學中提供的源碼將正邦網站首頁中的產品列表部分實現產品橫向滾動效果。
任務要求：
1、 原本兩行產品圖片列表可以保留，在列表之上增加一行圖片滾動效果；
實踐目標：
1、 熟悉javascript特效源碼的下載；
2、 熟悉javascript特效源碼的運用；
參考步驟：
(參考本章節對應的案例)
本章總結：
運用網頁腳本語言諸如javascript來編寫製作的程序代碼在網頁中實現特殊效果或者特殊功能是網站製作過程中經常運用到的。網頁特效為網頁活躍了氣氛，增加了頁面的親和力，豐富了網頁，因此在實際網頁製作中深受歡迎。常用的javascript特效源碼並不需要我們自己會編寫，而是可以直接在互聯網上下載，並運用到網頁中或者稍作修改即可。所以十分快捷方便。
