jquery版轮播图，带你了解轮播图的底层实现

最新推荐文章于 2024-07-22 15:13:59 发布

weixin_43993776

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量68

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_43993776/article/details/125737186

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html, body {height: 100%; overflow: hidden;}
        *{margin:0;padding:0;}
        .box{width:200px;height: 200px; box-shadow: 0 0 4px #eee; margin: 100px auto; overflow: hidden; position: relative;}
        .ul1{ width:1200px; display: flex; position: relative; left: -200px; }
        .li1{width:200px; height:200px; list-style: none; }
        .a{background: aquamarine}
        .b{background: brown}
        .c{background: chocolate}
        .d{background: blue}

        .pre{user-select :none;  display:none;position: absolute; top: 50%; left: 5px; transform: translateY(-50%); width: 30px; height: 30px; text-align: center; line-height: 30px; font-size: 28px; color: #fff; background: #333; border-radius: 50%;
            cursor: pointer;}
        .aft{user-select :none; display:none; position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 30px; height: 30px; text-align: center; line-height: 30px; font-size: 28px; color: #fff; background: #333; border-radius: 50%; cursor: pointer;}
        .box:hover .pre{display: block;}
        .box:hover .aft{display: block;}

        .pag{position: absolute; bottom: 6px; width: 100%; height: 12px; }
        .pag .row{display: flex; justify-content: center;}
        .pag .row .item{width: 8px; height: 8px; background: aqua; border-radius: 50%; margin: 0 3px; cursor: pointer;}
        .pag .row .item.active{background: brown; }
    </style>
</head>
<body>
    <div class="box">
        <!-- 轮播的item，前后各复制一份 -->
        <ul class="ul1">
            <li class="li1 d">D</li>

            <li class="li1 a">A</li>
            <li class="li1 b">B</li>
            <li class="li1 c">C</li>
            <li class="li1 d">D</li>

            <li class="li1 a">A</li>
        </ul>

        <!-- 前进后退的按钮 -->
        <div class="pre"> < </div>
        <div class="aft"> > </div>

        <!-- 下面的分页器 -->
        <div class="pag">
            <div class="row">
                <div class="item active"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>
    </div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    let timer = null;
    let num = 1;
    startItem();

    // 前进按钮
    $(".pre").click(function() {
        clearInterval(timer);

        rightAway(false);
        startItem();
    })

    // 后退按钮
    $(".aft").click(function() {
        clearInterval(timer);
        rightAway(true);
        startItem();
    })

    // 开始轮播
    function startItem() {
        clearInterval(timer);
        timer = setInterval(function() {
            num++;
            $(".box .ul1").animate({left: -num * 200}, 300)

            if(num >= 5) {
                num = 1;
                $(".box .ul1").animate({left: -num * 200}, 0)
            }

            // 设置分页器的高亮颜色
            $(".pag .row .item").eq(num-1).addClass("active").siblings(".active").removeClass("active");
        }, 1500)
    }

    // 点击按钮立马前后和后退轮播的方法 flag为true是后退； false是前进
    function rightAway(flag) {
        if(flag) {
            num++;
            $(".box .ul1").animate({left: -num * 200}, 300)

            if(num >= 5) {
                num = 1;
                $(".box .ul1").animate({left: -num * 200}, 0)
            }
        }else{
            num--;
            $(".box .ul1").animate({left: -num * 200}, 300)

            if(num <= 0) {
                num = 4;
                $(".box .ul1").animate({left: -num * 200}, 0)
            }
        }
        // 设置分页器的高亮颜色
        $(".pag .row .item").eq(num-1).addClass("active").siblings(".active").removeClass("active");
    }

    // 鼠标划过li标签显示前进后退的按钮
    $(".box").mouseenter(function() {
        clearInterval(timer);
    })
    $(".box").mouseleave(function() {
        startItem();
    })

    // 点击分页器切换到相应的位置
    $(".pag .row .item").click(function() {
        num = $(this).index();
        clearInterval(timer);   
        rightAway(true);
        startItem();
    })
</script>
</html>