摘 要：隨著網(wǎng)頁設計技術的發(fā)展，網(wǎng)頁的內(nèi)容通常是由圖片和文字組成。由文字構成網(wǎng)頁的主體，而圖片則能夠美化并為網(wǎng)頁增色。那些包含了設計精美圖片的網(wǎng)站，往往能讓瀏覽者流連忘返。因此，有漂亮的圖片效果是你的網(wǎng)頁能吸引人的一個有力保證。

關鍵詞：CSS HTML JavaScript

一、輪播圖片的概念

在當前的互聯(lián)網(wǎng)業(yè)內(nèi)，“輪播”通常被用來指代“廣告輪播”，即在某一個廣告位同一時間段內(nèi)會有很多個廣告輪流播放，第一個出現(xiàn)的廣告是隨機的，每刷新一次都會換一個廣告，以此類推，從而保證每一個廣告的出現(xiàn)頻率基本相同。

圖片是圖畫﹑照片﹑拓片等數(shù)據(jù)的統(tǒng)稱。在當前互聯(lián)網(wǎng)業(yè)內(nèi)，從展現(xiàn)的形式上看，可以簡單地分為靜態(tài)和動態(tài)兩種；輪播的中文字面“輪播”，顧名思義，指輪流播放。

二、用HTML搭建最基本的輪播框架

（一）HTML的定義

HTML（Hypertext Markup Language），即超文本標記語言，是用于描述網(wǎng)頁文檔的一種標記語言。

（二）保存網(wǎng)頁文檔

選擇[文件][保存]菜單命令，打開的“另存為”對話框，在“保存在”下拉列表框中選擇文件的保存路徑，在“文件名”文本框中輸入保存的文件名，單擊“保存”按鈕。

（三）設計HTML基本框架

1、首先在body里面設置一個整體的div模塊，id值是zt，然后再在div模塊里面設置兩個子模塊，id值分別是t1和t2。

2、在t1里面寫入作圖所需要的數(shù)字控制柄1234，分別給每個數(shù)字加上a標簽，a是鏈接的標簽，a標簽式成對出現(xiàn)的，以開始，結束。

三、在搭建好的框架中進行CSS樣式設置

用CSS對網(wǎng)頁進行美化

1、用鏈接式引用這個CSS樣式列表，這樣方便修改，這樣看起來思路會比較清晰。

2、因為每個標簽都有默認的margin和padding值，為了方便調(diào)節(jié)樣式，所以需要把這兩個默認值都去除。

{margin： 0px；padding： 0px；}

3、在整體zt和t2里面分別設置高為321px、320px，寬為241px、240px。在t2里面設置邊框，樣式為實線，寬度設為2像素，顏色為 #CCCCCC。

#zt {height： 321px；width： 241px；}

#t2 {height： 320px；width： 240px；borderL： 2px soild #cccccc；}

4、對t1里面的a標簽進行設置，設置顯示為塊，左浮動，高和寬分別為15px，去除下劃線，背景顏色為 #999999，行高為10px，字體加粗并且顏色為 #F6F5F2，文本對齊方式為居中，右邊界為2px，上填充為4px。

#t1 a {display： block；float： left；

height： 15px；width： 15px；text-decoration： none；background-color： #999999；line-height： 10px；color： #f6f5f2；font-weight： bold；text-align： center；margin-right： 2px；padding-top： 4px；}

5、在對t1加上一個鼠標經(jīng)過的樣式，背景設置為 #CCCCCC，字體顏色為#666666。

#t1 a：hover {background-color： #cccccc；color： #666666；}

6、為了進一步保證圖片在div中的適應性，將圖片的高和寬分別設為320px、240px。

#t2 img {height： 320px；width： 240px；}

四、用JavaScript實現(xiàn)圖片的輪播效果

（一）簡述JavaScript

JavaScript是一種由Netscape的LiveScript發(fā)展而來的原型化繼承的面向對象的動態(tài)類型的區(qū)分大小寫的客戶端腳本語言，主要目的是為了解決服務器端語言。

（二）加入JavaScript代碼實現(xiàn)圖片的輪播效果

1、在body里面加入onload事件，onload故名思語就是“頁面加載完成后執(zhí)行的動作”。在代碼里加入JavaScript的標簽。

2、預先定義變量t并賦值為1，然后建立自定義函數(shù)a，其中 setTimeout（） 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式。帶參數(shù)方法使用setTimeout時要注意其使用格式為setTimeout（“函數(shù)名（‘+參數(shù)+’）”，毫秒數(shù)），并且大小寫要嚴格遵守，不然無法獲取或者設置數(shù)據(jù)。

3、設置頁面中div標簽id值為t2的html代碼。

function c（t）{t2.innerhtml=\"\"}

1、在a標簽里添加onmouseover事件，onmouseover事件會在鼠標指針移動到指定的對象上時觸發(fā)事件發(fā)生。

總結：

利用CSS和JavaScript技術，通過簡單的代碼實現(xiàn)圖片輪播的效果，并且兼容各種瀏覽器（IE、Firefox、Chrome），除此之外還有體積小，調(diào)用方便，比一般的 flash 輪播效果更省資源，更快的加載速度等優(yōu)點。不過由于代碼簡單，圖片之間的過度效果不太理想，為了彌補這一缺陷，可能還需要利用其他的一些方法，例如Flash、Gif、jQuery等。

參考文獻：

[1] 阮文江. JavaScript程序設計基礎教程[M].人民郵電出版社，2004（8）.

[2] 俞黎敏. CSS實戰(zhàn)手冊[M].電子工業(yè)出版社，2007（9）.

（作者單位：江蘇省鹽城技師學院 江蘇鹽城市 224002）