代码实例效果精选|哈哈哈原来使用jQuery+CSS就可以实现图片自动切换轮播效果是那么简单的事情搞了个小米商城官网淡入淡出自动轮播图效果来看看也挺好玩的附上实例完整代码 jquery|javascript|自动轮播图效果

作者：极客小俊
公众号:同名

文章图片

前言
刚刚学了javascript有了一点点小基础之后感觉,原来使用jQuery+CSS就可以实现图片切换轮播效果是那么简单的事情你再也不用使用javascript去写一大堆繁琐的代码了
搞了个小米商城官网淡入淡出轮播图效果来看看其实很简单
学一点jquery你就可以自己造轮子啦!
哈哈哈哈怎么不相信吗？看下面的代码吧!
准备工作
肯定是先准备jQuery库文件，没有的朋友去官网下载，说过几十万八遍了哈! 嗯嗯好的!
【代码实例效果精选|哈哈哈原来使用jQuery+CSS就可以实现图片自动切换轮播效果是那么简单的事情搞了个小米商城官网淡入淡出自动轮播图效果来看看也挺好玩的附上实例完整代码】然后是准备几张图片。大小你也可以随意! 我这里找的是2452 x 920大小的
如图

文章图片

接下来废话不多说直接上代码!
HTML代码结构

文章图片文章图片文章图片文章图片文章图片

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; varindex=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基础的朋友都能够读懂代码!
最终实现效果
如图