運用CSS和JavaScript技術(shù)設(shè)計網(wǎng)頁輪播圖
2018-01-09 11:02王曉華
科技視界 2017年28期
【摘 要】運用HTML+CSS+JavaScript技術(shù)將網(wǎng)頁的內(nèi)容、外觀樣式及動態(tài)效果分離的設(shè)計方式正逐步取代傳統(tǒng)的布局方式，本文中的輪播圖動態(tài)效果正是基于這一設(shè)計方式。本文詳細介紹了設(shè)計過程，實現(xiàn)了完整的輪播圖的動態(tài)效果。
【關(guān)鍵詞】輪播圖；CSS；JavaScript；定時器
0 概述
輪播圖是當前網(wǎng)頁設(shè)計中經(jīng)常使用的動態(tài)效果，它通過動態(tài)地變換圖片來達到吸引用戶注意并點擊鏈接的目的。本文帶領(lǐng)大家運用CSS與JavaScript的知識制作一款功能全面的網(wǎng)頁輪播圖，如圖所示，當鼠標放在數(shù)字上時顯示相應(yīng)序號的圖片，當鼠標離開時圖片自動按順序輪換。
圖1 輪播圖效果
1 “輪播圖”設(shè)計過程
1.1 結(jié)構(gòu)分析
整個顯示內(nèi)容分為三部分：上面的圖片、下面的數(shù)字和圖片底部的圖片說明文字，其中圖片和數(shù)字分別在
中，說明文字與圖片在同一
中，為了方便整體控制，可以在外面加一個大的
。
1.2 樣式分析
（1）通過最外層的大盒子對顯示內(nèi)容進行整體控制，需要對其設(shè)置寬度及外邊距樣式。
（2）為了控制數(shù)字的顯示，需要對其設(shè)置寬度、高度、邊框、浮動及display屬性值。
（3）為了控制說明文字顯示在圖片左下角位置需要對其進行設(shè)置position定位。
1.3 JavaScript效果分析
（1）首先需要獲取到頁面上的數(shù)字元素，然后對其所在每個數(shù)組元素添加mouseover事件方法，利用數(shù)字的鍵值變換圖片路徑，需要閉包和自執(zhí)行函數(shù)的語法知識，代碼如下所示：
（2）為了實現(xiàn)鼠標移出時數(shù)字鍵值的自動變換從而變換圖片的效果，需要運用定時器周期函數(shù)，代碼如下所示：
至此，就完成了如圖1所示的輪播圖效果。
2 結(jié)語
利用HTML+CSS+JavaScript技術(shù)將網(wǎng)頁的內(nèi)容、外觀樣式及動態(tài)效果分離的設(shè)計方式正逐步取代傳統(tǒng)的布局方式，HTML是基礎(chǔ)架構(gòu)，CSS是樣式表現(xiàn)，JavaScript實現(xiàn)網(wǎng)頁的動態(tài)交互效果。本文中的輪播圖動態(tài)效果正是基于這種設(shè)計方式實現(xiàn)的。
【參考文獻】
[1]曾順.前沿科技，精通JavaScript+jQuery，人民郵電出版社 2012.03.
[2]郭蕊.21天學通JavaScript，電子工業(yè)出版社，2014.01.
