各位親愛的伙伴們
大家周末愉快
上次給大家寫了
給貓貓制作簡單的輪播圖
收到了淌实，小伙伴們一致吐槽沃斤，娜娜制作出來的這個輪播圖不能動呀~鬼譬。好吧說實話陨瘩，那個本來就動不了腕够。但是伙伴們的建議，我都收到了舌劳，那么今天我們來制作一個帚湘，可以自己動的輪播圖——某電商網(wǎng)站的輪播圖制作。
制作網(wǎng)站的輪播圖
第一步：
準(zhǔn)備素材甚淡，畢竟是要做一個電商網(wǎng)站的輪播圖大诸，不能像上次一樣隨便弄點貓貓圖片就上去了，看到咱們高大上的效果圖了嗎贯卦？
里面的每一張圖片资柔，都是娜娜精心在網(wǎng)上挑選的，畢竟娜娜的設(shè)計水平有限撵割，做不出來這么高大上的圖片贿堰。
第二步：
圖片素材準(zhǔn)備完畢，咱們來開始編代碼~
首先還是頁面的布局：
通過效果圖我們可以看到：整個 banner 是一個模塊啡彬，里面有三個子模塊圖片 pic羹与，左右點擊的按鈕 btn，和小面的6個小按鈕庶灿。代碼就像下面這個樣子纵搁。
布局完成之后，下面我們來補充樣式：
好的往踢，我們的布局和樣式都寫完了腾誉，頁面就是下面的效果了。
現(xiàn)在我們來寫 JS 代碼，記得要導(dǎo)入jQuery的包呦~?
當(dāng)我們的鼠標(biāo)劃入的時候妄辩，更換圖片圖片惑灵，更換按鈕的背景色~
這段代碼實現(xiàn)的功能是，當(dāng)我們的鼠標(biāo)移動到主圖上或者按鈕上時眼耀，顯示按鈕英支。其他時候隱藏按鈕（btn）。
當(dāng)我們點擊兩邊的 btn 時觸發(fā)這個事件哮伟，輪播圖會變換干花。
接下來設(shè)置自動輪播，并且調(diào)用這個函數(shù)楞黄。
最后一個功能池凄，當(dāng)我們的鼠標(biāo)滑動上去的時候圖片停止不動。
效果：
好的今天就到這里了
再見了
