「?? 作者：極客小俊」
「* 把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主」

前言 ???

剛剛學(xué)了javascript有了一點(diǎn)點(diǎn)小基礎(chǔ)之后感覺(jué),原來(lái)使用jQuery+CSS就可以實(shí)現(xiàn)圖片切換輪播效果是那么簡(jiǎn)單的事情 ?你再也不用使用javascript去寫一大堆繁瑣的代碼了 搞了個(gè)小米商城官網(wǎng)淡入淡出輪播圖效果來(lái)看看 其實(shí)很簡(jiǎn)單 學(xué)一點(diǎn)jquery你就可以自己造輪子啦! 哈哈哈哈 ? ?????? ? 怎么不相信嗎？ 看下面的代碼吧!

準(zhǔn)備工作??

肯定是先準(zhǔn)備jQuery庫(kù)文件，沒(méi)有的朋友去官網(wǎng)下載 ，說(shuō)過(guò)幾十萬(wàn)八遍了哈! ?嗯嗯 好的! ???????

然后是準(zhǔn)備幾張圖片。大小你也可以隨意! 我這里找的是2452 x 920大小的 如圖

接下來(lái)廢話不多說(shuō) 直接上代碼!

HTML代碼結(jié)構(gòu) ??

<div id="banner">
<!--圖片-->
<div class="pic">
<img src="img/a.jpg" width="800px" height="300px" alt="" title="" style="display: block;">
<img src="img/b.jpg" width="800px" height="300px" alt="" title="">
<img src="img/c.jpg" width="800px" height="300px" alt="" title="">
<img src="img/d.jpg" width="800px" height="300px" alt="" title="">
<img src="img/e.jpg" width="800px" height="300px" alt="" title="">
</div>

<div class="btn">
?<ul>
? <li class="active"></li>
? <li></li>
? <li></li>
? <li></li>
? <li></li>
?</ul>
</div>
</div>

CSS樣式代碼??

*{
margin: 0;
padding: 0;
}

#banner{
width: 800px;
height: 300px;
margin: 150px auto;
position: relative;
}

#banner .pic{
width: 800px;
height: 300px;
}

#banner .pic>img{
position: absolute;
top: 0px;
left: 0px;
display: none;
}

#banner>.btn{
width:100px;
height: 20px;
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -50px;
}

#banner .btn ul{
list-style: none;
}

#banner .btn ul li{
width: 6px;
height: 6px;
border: 2px solid #757575;
border-color: rgba(255,255,255,0.3);
border-radius: 50%;
display: inline-block;
text-align: center;
margin: 0 3px;
background: rgba(0,0,0,0.4);
cursor: pointer;
}

#banner .btn ul li.active{
?background: rgba(255,255,255,0.4);
?border-color: rgba(0,0,0,0.4);
}

jQuery代碼邏輯 *

$(function(){
var timer=null;
var ?index=0;
$("#banner .btn ul>li").hover(
function(){
?index=$(this).index();
?$(this).addClass('active').siblings().removeClass('active');
?$("#banner .pic>img").eq(index).stop(true).fadeIn().siblings().stop(true).fadeOut();
},
function(){}
);

//自動(dòng)播放
timer=setInterval(Play,1000);


function Play(){
index++;
index%=5; ?
$("#banner .btn ul>li").eq(index).addClass('active').siblings().removeClass('active');
$("#banner .pic>img").eq(index).stop(true).fadeIn().siblings().stop(true).fadeOut();
}


$("#banner").hover(
function(){
?clearInterval(timer);
},
function(){
?timer=setInterval(Play,1000);
}
);
})

看吧也就這么幾句核心代碼, 就是這一點(diǎn)點(diǎn)代碼邏輯 有點(diǎn)js+jquery基礎(chǔ)的朋友都能夠讀懂代碼!

最終實(shí)現(xiàn)效果 ??

如圖

如果文章對(duì)你有幫助的話就請(qǐng)

??點(diǎn)贊 ??評(píng)論 ??收藏

一鍵三連哦！

如果以上內(nèi)容有任何錯(cuò)誤或者不準(zhǔn)確的地方，????歡迎在下面 ?? 留個(gè)言指出!

或者你有更好的想法，歡迎一起交流學(xué)習(xí)??????????