jQuery 实现滚动轮播图 --- 防流氓操作

大闸蟹~

于 2022-03-24 15:04:40 发布

阅读量164

点赞数

分类专栏： jq 文章标签： jquery

本文链接：https://blog.csdn.net/YCHH1/article/details/123711128

版权

jq 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        #container {
            width: 750px;
            height: 300px;
            margin: 50px auto;
            border: 1px solid #000;
            position: relative;

            overflow: hidden;
        }

        .banner {
            width: 10000px;
            overflow: hidden;
            position: relative;
            display: flex;
        }

        .left,
        .right {
            padding: 3px 5px;
            font-size: 36px;
            color: white;
            background-color: black;
            opacity: 0.3;
            cursor: pointer;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .right {
            right: 0;
        }

        #bot-nav {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }

        li {
            cursor: pointer;
            margin-right: 10px;
            border-radius: 50%;
            border: 5px solid white;
        }

        .on {
            border-color: red;
        }
    </style>
</head>

<body>

    <div id="container">
        <div class="banner">
            <img src="./images/1.png" alt="">
            <img src="./images/2.png" alt="">
            <img src="./images/3.png" alt="">
            <img src="./images/4.png" alt="">
            <img src="./images/5.png" alt="">
            <img src="./images/6.png" alt="">

            <!-- 猫腻图 -->
            <img src="./images/1.png" alt="">
        </div>

        <!-- 左右按钮 -->
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>

        <!-- 底部导航 -->
        <ul id="bot-nav">
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <script src="./js/jquery-3.5.0.js"></script>

    <script>
        // 获取图片的数量
        var imgs = $("img").length;

        // 定义初始索引
        var num = 0;

        // 实现图片的自动轮播
        var timer = setInterval(slide, 1000);

        function slide() {
            num++;

            $(".banner").animate({
                left: -num * 750
            }, function () {
                if (num === imgs - 1) {
                    num = 0;
                    $(".banner").css({ left: 0 })
                }
                // 底部导航的切换
                $("li").eq(num).addClass("on").siblings().removeClass("on")
            })
        }

        // 鼠标进入容器 停止轮播
        $("#container").mouseenter(function () {
            clearInterval(timer)
            $(".left").css({opacity:0.8});
            $(".right").css({opacity:0.8});
        })

        // 鼠标离开容器继续轮播
        $("#container").mouseleave(function () {
            timer = setInterval(slide, 1000);
            $(".left").css({opacity:0.3});
            $(".right").css({opacity:0.3});
        })

        // 左导航的点击事件
        $(".left").click(function () {
            // 防流氓 判断是否在轮播状态
            if ($(".banner").is(":animated")) {
                return;
            }
            num--;
            if (num < 0) {
                // 切换到猫腻图前面的那张图片的索引
                num = imgs - 2;
                // 瞬移到猫腻图
                $(".banner").css({ left: -(num + 1) * 750 });
            }

            // 图片的轮播图
            $(".banner").animate({ left: -num * 750 });
            // 底部导航的轮播
            $("li").eq(num).addClass("on").siblings().removeClass("on");
        })

        // 右侧导航的点击事件
        $(".right").click(function(){
            if($(".banner").is(":animated")){
                return;
            }
            slide()
        })


        // 点击底部导航的切换
        $("li").click(function(){
            if($(".banner").is(":animated")){
                return;
            }
            num = $(this).index();

            // 底部导航的切换
            $("li").eq(num).addClass("on").siblings().removeClass("on");
            // 动画的继续轮播
            $(".banner").animate({left:-num *  750});

            // \这样实现是干崩的效果
            // $(".banner").css({left:-num * 750});
        })
    </script>