大家好，欢迎来到IT知识分享网。

「 作者：极客小俊」
「 把逻辑思维转变为代码的技术博主」

前言

刚刚学了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 #; 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基础的朋友都能够读懂代码!

最终实现效果

如图

“点赞” “✍️评论” “收藏”

大家的支持就是我坚持创作下去的动力!​

​如果以上内容有任何错误或者不准确的地方，欢迎在下面 留个言指出、或者你有更好的想法，欢迎一起交流学习❤️❤️❤️❤️❤️​