使用jQuery实现淡入淡出式轮播_Txqmohuan的博客

首先把基本页面做好

html代码如下：

<div id = 'banner'>
        <div id="carousel">
            <img src="../img/1.jpg" alt="" style="display: block;">
            <img src="../img/2.jpg" alt="">
            <img src="../img/3.jpg" alt="">
            <img src="../img/4.jpg" alt="">
            <img src="../img/5.jpg" alt="">
        </div>
    
        <div id="left">&lt;</div>
        <div id="right">&gt;</div>
    
        <ul class="slide-nav">
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
</div>

其中类名和id自己随意取，你这里只需要把图片路径改一下就好了。
以下是css代码：

*{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        #banner{
            width: 590px;
            height: 470px;
            border: groove 2px;
            margin: 50px auto;
            position: relative;
        }
        #carousel{
            width: 100%;
            height: 100%;
        }
        #carousel img{
            position: absolute;
            display: none;
        }
        #left,#right{
            padding: 10px 6px;
            background-color: black;
            color: white;
            position: absolute;
            top:50%;
            cursor: pointer;
        }
        #right{
            right: 0;
        }
        .slide-nav{
            width: 200px;
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
        .slide-nav li{
            width: 20px;
            height: 20px;
            background-color: white;
            float: left;
            margin-right: 5px;
            border-radius: 50%;
            cursor: pointer;
        }
        .slide-nav li.on{
            background-color: red;
        }

好了进入今天主题，前面废话有点多了哈。
话不多说，jQuery代码如下:
（首先引入jQuery）

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

推荐大家一个：BootCDN
BootCDN 是 猫云 联合 Bootstrap 中文网 共同支持并维护的前端开源项目免费 CDN 服务
我就是从这里引入的jQuery
以下是正式代码：

//获取所有图片
        var img = $("img")
        var len = $("img").length
        var lis = $(".slide-nav li")
        
        // 设置截流变量,防止点击过快问题
        let isMove = true
        //设置当前索引currentIndex，下个索引 nextIndex
        let currentIndex = 0 , nextIndex = 1;
        // 轮播函数
        function move(){
            if(isMove){
                isMove = false
                img.eq(currentIndex).fadeOut(1000,function(){
                    // 淡出结束后把isMove变回true
                    isMove = true
                });
                img.eq(nextIndex).fadeIn(1000,function(){
                    // 淡入结束后把isMove变回true
                   isMove = true
                });
                $('li').eq(nextIndex).addClass('on').siblings().removeClass('on')
                currentIndex = nextIndex
                nextIndex += 1
                if(nextIndex >= len) {
                    nextIndex = 0
                }
            }
        }
        // 全局标记
        let timer
        // 设置轮播
        function auto() {
            timer = setInterval(move,3000)
        }
        // 启动轮播
        auto()
        // 鼠标移入/移出暂停/继续轮播
        $('#banner').hover(function () {
            clearInterval(timer)
        },function(){
            auto()
        })
        // 点击箭头效果
        $("#right").click(function(){
            move()
        })
           
        $("#left").click(function(){
            nextIndex = currentIndex - 1
            if(nextIndex < 0){
                nextIndex = len -1
            }
            move()
        })
        // 小圆点效果
        lis.click(function(){
            nextIndex = $(this).index()
            move()
        })

因为jQuery有个队列问题，就是连续点击同个事件，当点击的事件
未完成时，再点击该事件时，后一个事件就会排在前一个事件后面
按顺序执行，所以在该案例中，如果你快速的点击切换按钮（包括
小圆点），所以我设置了isMove作为一个变量，解决这个队列问题。
就是当执行淡入淡出事件时，isMove变为false，当执行淡入淡出事
件完毕后，isMove再变为true，这样当你点击过快时，当次的淡入淡
出还没完毕是不会执行下一次的淡入淡出事件的。
emmm…第一次写博客感觉自己废话多了点，嘿嘿，希望我的博客对
你们有点帮助，嘿嘿！拜拜下次见！！！