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