哈哈哈 原来使用jQuery+CSS就可以实现图片自动切换轮播效

✍️作者：极客小俊
😈公众号同名: 一个把逻辑思维转变为代码的技术博主

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

前言 😲

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

如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

---

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