JS輪播圖
1.在Html中用div做container,來(lái)存放圖片組
#container>#img-lists>img*圖片數(shù)字
設(shè)置基本的css樣式
2.js中分幾步
2.1 創(chuàng)建按鈕
先創(chuàng)建新的ul或者div來(lái)存放按鈕款违,按鈕用遍歷的方式分別添加到創(chuàng)建ul中
使用addClass函數(shù),添加對(duì)應(yīng)的樣式名字
2.2 編寫點(diǎn)擊函數(shù)
使得按鈕能分別控制圖片組中的圖片切換 ?編寫clickSpan函數(shù)
依據(jù)圖片在圖片組中的index來(lái)進(jìn)行iTarget值得切換猖败,達(dá)到切換的目的
使用事件代理delegateEvent函數(shù)
因?yàn)閳D片切換的時(shí)候按鈕的樣式也有切換,所以編寫一個(gè)移出屬性名的函數(shù)急前,removeClass
2.3編寫自動(dòng)運(yùn)行
分別是移入移出事件瓷产,和運(yùn)動(dòng)模型startMove,以及編寫自動(dòng)運(yùn)行autoPlay函數(shù)
autoPlay可以參考上面按鈕點(diǎn)擊的clickSpan函數(shù)谆沃,只不過(guò)是從點(diǎn)擊事件改成了計(jì)時(shí)器來(lái)控制
startMove參考http://www.rehack.cn/techshare/webfe/javascript/2829.html或者慕課的JS運(yùn)動(dòng)課程
使用setInterval方法锯岖,注意在使用的時(shí)候配合clearInterval方法介袜,不然操作不當(dāng)計(jì)時(shí)器會(huì)疊加