jQuery完善轮播图

轮播图的最终效果

实现的功能,每隔一段时间自动切换一张图片,点击下方小按钮可以切换图片，中间左右按钮也可以切换图片
实现原理:利用display:none 和 索引值实现图片切换

播图的静态样式
先写html结构

    <!-- 轮播图的最大框 -->
    <div class="banner">
        <!-- 轮播图的图片,图片名字最后一定要是顺序数字 -->
        <img src="./img/banner1.jpg" alt="">
        <img src="./img/banner2.jpg" alt="">
        <img src="./img/banner3.jpg" alt="">
        <img src="./img/banner4.jpg" alt="">
        <img src="./img/banner5.jpg" alt="">
        <!-- 轮播图的左右切换按钮 -->
        <div class="switch">
            <div class="left"><--</div>
            <div class="right">--></div>
        </div>
        <!-- 轮播图中下方选择按钮 -->
        <div class="btn">
            <!-- 包裹一个div定宽居中 -->
            <div>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </div>
        </div>
    </div>

css样式

.banner {
            width: 900px;
            height: 450px;
            margin: 0 auto;
            border: 10px solid #757575;
            position: relative;
        }

        .banner img {
            display: none;
        }

        .btn {
            width: 100%;
            /* background: red; */
            position: absolute;
            bottom: 10px;
        }

        .btn div {
            width: 200px;
            display: flex;
            justify-content: space-between;
            /* background:chartreuse; */
            margin: 0 auto;
        }

        .btn div li {
            list-style: none;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid #757575;
        }

        .switch {
            width: 860px;
            /* background: red; */
            position: absolute;
            top: 200px;
            height: 50px;
            /* background:greenyellow; */
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
        }

        .switch div {
            width: 50px;
            line-height: 50px;
            text-align: center;
            color: #ccc;
            font-size: 25px;
            font-weight: 900;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid #757575;
            border-radius: 50%;
        }
    </style>

静态样式写完是这样的,因为图片标签都display:none了所以看不到图片

接下来写jquery代码

 <!-- 先引入jquery库 -->
    <script src="../../jquery-3.4.1.js"></script>
    <script>
        // 声明timer控制定时器
        var timer
        // 将索引值为0，第一位的img图片显示出来
        $(`.banner img:eq(${0})`).css("display", "block")
        // 将索引值为0，第一位的下方五个按钮的第一个背景样式显示
        $(`li:eq(${0})`).css('background', 'rgba(255, 255, 255,0.5)')
        // 声明一个全局变量 记录显示的图片
        var x = 0
        // 给li点击事件
        $('li').click(function () {
            // 清除上次点击的样式初始值是第一个零
            $(`li:eq(${x})`).css('background', 'rgba(0,0,0,0.5)')
            $(`img:eq(${x})`).css('display', 'none')
            // 将点击的那个按钮的索引值赋值给x
            x = $(this).index()
            // 将点击的按钮样式改变
            $(this).css('background', 'rgba(255, 255, 255,0.5)')
            $(`img:eq(${x})`).css('display', 'block')
        })
        // 鼠标停在轮播图上时停止定时器
        $('.banner').mouseenter(function () {
            console.log('======')
            clearInterval(timer)
        })
        //默认开启一个定时器
        timer = setInterval(function () {
            // 每隔一段时间切换一张图片
            x += 1
            // 当下方小按钮执行到最后一个的时候切换为第一个
            if (x > 4) {
                x = 0
            }
            $('li').css('background', 'rgba(0,0,0,0.5)')
            $('img').css('display', 'none')
            $(`li:eq(${x})`).css('background', 'rgba(255, 255, 255,0.5)')
            $(`img:eq(${x})`).css('display', 'block')
        }, 1000);
        // 鼠标离开轮播图时开启定时器
        $('.banner').mouseleave(function () {
            console.log("--------")
            timer = setInterval(function () {
                x += 1
                if (x > 4) {
                    x = 0
                }
                $('li').css('background', 'rgba(0,0,0,0.5)')
                $('img').css('display', 'none')
                $(`li:eq(${x})`).css('background', 'rgba(255, 255, 255,0.5)')
                $(`img:eq(${x})`).css('display', 'block')
            }, 1000);
        })
        // 点击左边按钮时轮播图像左走一格
        $('.left').click(function () {
            x -= 1
            if(x<0){
                x=4
            }
            $('li').css('background', 'rgba(0,0,0,0.5)')
            $('img').css('display', 'none')
            $(`li:eq(${x})`).css('background', 'rgba(255, 255, 255,0.5)')
            $(`img:eq(${x})`).css('display', 'block')
        })
        // 点击右边按钮时轮播图像右走一格
        $('.right').click(function () {
            x += 1
            if(x>4){
                x=0
            }
            $('li').css('background', 'rgba(0,0,0,0.5)')
            $('img').css('display', 'none')
            $(`li:eq(${x})`).css('background', 'rgba(255, 255, 255,0.5)')
            $(`img:eq(${x})`).css('display', 'block')
        })
    </script>