各位親愛的伙伴們
大家周末愉快
上次給大家寫了
給貓貓制作簡單的輪播圖
收到了稠鼻，小伙伴們一致吐槽商佑，娜娜制作出來的這個(gè)輪播圖不能動(dòng)呀~耕挨。好吧說實(shí)話舷礼，那個(gè)本來就動(dòng)不了鹃彻。但是伙伴們的建議，我都收到了妻献，那么今天我們來制作一個(gè)蛛株，可以自己動(dòng)的輪播圖——某電商網(wǎng)站的輪播圖制作。
制作網(wǎng)站的輪播圖
第一步：
準(zhǔn)備素材旋奢，畢竟是要做一個(gè)電商網(wǎng)站的輪播圖泳挥，不能像上次一樣隨便弄點(diǎn)貓貓圖片就上去了，看到咱們高大上的效果圖了嗎至朗？
里面的每一張圖片屉符，都是娜娜精心在網(wǎng)上挑選的，畢竟娜娜的設(shè)計(jì)水平有限锹引，做不出來這么高大上的圖片矗钟。
第二步：
圖片素材準(zhǔn)備完畢，咱們來開始編代碼~
首先還是頁面的布局：
通過效果圖我們可以看到：整個(gè) banner 是一個(gè)模塊嫌变，里面有三個(gè)子模塊圖片 pic吨艇，左右點(diǎn)擊的按鈕 btn，和小面的6個(gè)小按鈕腾啥。代碼就像下面這個(gè)樣子东涡。
布局完成之后，下面我們來補(bǔ)充樣式：
好的倘待，我們的布局和樣式都寫完了疮跑，頁面就是下面的效果了。
現(xiàn)在我們來寫 JS 代碼凸舵，記得要導(dǎo)入jQuery的包呦~?
當(dāng)我們的鼠標(biāo)劃入的時(shí)候祖娘，更換圖片圖片，更換按鈕的背景色~
這段代碼實(shí)現(xiàn)的功能是啊奄，當(dāng)我們的鼠標(biāo)移動(dòng)到主圖上或者按鈕上時(shí)渐苏，顯示按鈕。其他時(shí)候隱藏按鈕（btn）菇夸。
當(dāng)我們點(diǎn)擊兩邊的 btn 時(shí)觸發(fā)這個(gè)事件琼富，輪播圖會(huì)變換。
接下來設(shè)置自動(dòng)輪播峻仇，并且調(diào)用這個(gè)函數(shù)公黑。
最后一個(gè)功能，當(dāng)我們的鼠標(biāo)滑動(dòng)上去的時(shí)候圖片停止不動(dòng)摄咆。
效果：
好的今天就到這里了
完整代碼奉上
Title
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
a{text-decoration:none;color: inherit;}
img{display: block;border:none;}
ol,ul{list-style:none;}
#banner{width:730px; height:454px; margin:50px auto; position:relative;}
#banner .pic{width:730px; height:454px; position:relative;}
#banner .pic ul li{width:730px; height:454px; position:absolute; top:0;left:0; list-style:none; display:none;}
#banner .tab{width:160px; height:20px; position:absolute; left:calc(50% - 78px); bottom:10px;}
#banner .tab ul li{width:20px; height:20px; background:#999; border-radius:100%; float:left; list-style:none;
text-align:center; line-height:20px; color:#fff; font-size:12px; cursor:pointer; ?font-weight:bold;
margin:0 3px; transition:background 0.2s;}
#banner .tab ul li.on{background:#c00;}
#banner .btn{display:none;}
#banner .btn div{width:30px; height:60px; background:rgba(0,0,0,.2); color:#fff; text-align:center;
line-height:60px; cursor:pointer; position:absolute; top:calc(50% - 30px); }
#banner .btn div.left{ left:0; }
#banner .btn div.right{ right:0;}
<
>
1
2
3
4
5
6
學(xué)習(xí)Java的同學(xué)注意了７惭痢！吭从！學(xué)習(xí)過程中遇到什么問題或者想獲取學(xué)習(xí)資源的話朝蜘，歡迎加入Java學(xué)習(xí)交流群：253772578，我們一起學(xué)Java涩金！
