作者：极客小俊
🚀 个人主页 极客小俊
✍🏻 作者简介：web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起进步！😄
🏅 如果文章对你有帮助的话，欢迎评论 💬点赞👍🏻 收藏 📂加关注
前言 😲
刚刚学了javascript有了一点点小基础之后感觉,原来使用jQuery+CSS就可以实现图片切换轮播效果是那么简单的事情 你再也不用使用javascript去写一大堆繁琐的代码了
搞了个小米商城官网淡入淡出轮播图效果来看看 其实很简单
学一点jquery你就可以自己造轮子啦!
哈哈哈哈 😃😃😃 怎么不相信吗？ 看下面的代码吧!
准备工作🧐
肯定是先准备jQuery库文件，没有的朋友去官网下载 ，说过几十万八遍了哈! 嗯嗯 好的! 🤣🤣🤣
然后是准备几张图片。大小你也可以随意! 我这里找的是2452 x 920大小的如图
接下来废话不多说 直接上代码!
HTML代码结构 🤗
<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(){
}
);
//自动播放
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);
}
);
})
看吧其实核心就是这一点点代码逻辑 有点js+jquery基础的朋友都能够读懂代码!
最终实现效果
如图
