jquery简单实现无缝可滑动轮播图

我会带着你远行 2023-07-17 04:54 36阅读 0赞

话不多说，直接上代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }
    
        .outer {
            position: relative;
            width: 360px;
            height: 200px;
            margin: 20px auto;
        }
    
        .dots {
            position: absolute;
            width: 100%;
            bottom: 10px;
            margin: 0 auto;
        }
    
        .dots ol {
            display: flex;
            justify-content: center;
        }
    
        .dots .active {
            background: #666666;
        }
    
        .dots li {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-left: 5px;
            background: #aaaaaa;
            cursor: pointer;
        }
    
        .control-btns {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;
        }
    
        .control-btns>div {
            width: 50%;
        }
    
        .btn-left,
        .btn-right {
            user-select: none;
            color: gray;
            width: 30px;
            line-height: 20px;
            border: 1px solid #999999;
            text-align: center;
            vertical-align: middle;
            text-decoration: none;
            display: none;
            position: absolute;
            top: 50%;
            margin-top: -10px;
            left: 10px;
        }
    
        .btn-right {
            left: auto;
            right: 10px;
        }
    
        .inner {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
        }
    
        .item {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: auto;
        }
    
        img {
            width: 100%;
        }
    
        .active {
            display: block;
        }
    
        .left {
            display: block;
            animation: left 0.3s linear;
        }
    
        .rightnext {
            display: block;
            animation: right 0.3s linear;
        }
    
        .right {
            display: block;
            animation: right 0.3s linear reverse;
        }
    
        .leftnext {
            display: block;
            animation: left 0.3s linear reverse;
        }
    
        @keyframes left {
            0% {
                left: 0;
            }
    
            100% {
                left: -100%;
            }
        }
    
        @keyframes right {
            0% {
                left: 100%;
            }
    
            100% {
                left: 0;
            }
        }
    </style>
    
    <body>
        <div class="outer">
            <ul class="inner">
                <li class="item active"><img src="./imgs/1.png" alt=""></li>
                <li class="item"><img src="./imgs/2.png" alt=""></li>
                <li class="item"><img src="./imgs/3.png" alt=""></li>
            </ul>
            <div class="control-btns">
                <div>
                    <a href="#" class="btn-left">左</a>
                </div>
                <div>
                    <a href="#" class="btn-right">右</a>
                </div>
            </div>
            <div class="dots"></div>
        </div>
    
        <script src="./libs/jquery-3.3.1.js"></script>
        <script>
            var index = 0;
            var len = $('.item').length;
            var last = 0;
            var dots = "<ol>";
            for (var i = 0; i < len; i++) {
                dots += "<li></li>";
            }
            dots += "</ol>";
            $(".dots").html(dots);
            $(".dots").find("li").eq(last).addClass("active");
            $(".dots").on("click", "li", function() {
                last = $(this).index();
                $(".dots li,.inner li").removeClass("active");
                $(".inner").find("li").eq(last).addClass("active");
                $(".dots").find("li").eq(last).addClass("active");
            });
            function playLeft() {
                index = $('.inner .active').index();
                $('.inner .active').addClass('left');
                $(".dots").find("li").eq(last).removeClass("active");
                if (index == len - 1) {
                    $('.inner .item').eq(0).addClass('rightnext');
                    $(".dots").find("li").eq(0).addClass("active");
                    last = 0;
                } else {
                    $('.inner .item').eq(index + 1).addClass('rightnext');
                    $(".dots").find("li").eq(index + 1).addClass("active");
                    last = index + 1;
                }
            }
    
            function playRight() {
                index = $('.inner .active').index();
                $('.inner .active').addClass('right');
                $(".dots").find("li").eq(last).removeClass("active");
                if (index == 0) {
                    $('.inner .item').eq(len - 1).addClass('leftnext');
                    $(".dots").find("li").eq(len - 1).addClass("active");
                    last = len - 1;
                } else {
                    $('.inner .item').eq(index - 1).addClass('leftnext');
                    $(".dots").find("li").eq(index - 1).addClass("active");
                    last = index - 1;
                }
            }
            $('.btn-left').on('click', function () {
                playLeft();
            });
            $('.btn-right').on('click', function () {
                playRight();
            });
            $('.outer').on('animationend', ".rightnext", function () {
                $('.inner li').removeClass('left rightnext active');
                $(this).addClass('active');
            });
            $('.outer').on('animationend', ".leftnext", function () {
                $('.inner li').removeClass('right leftnext active');
                $(this).addClass('active');
            });
            $(".control-btns>div").on("mouseout", function () {
                $(this).find("a").hide();
            });
            $(".control-btns>div").on("mouseover", function () {
                $(this).find("a").show();
            });
            $(".outer").on("mouseover", function () {
                clearInterval(timer);
            })
            $(".outer").on("mouseout", function () {
                timer = setInterval(function () {
                    playLeft();
                }, 1000);
            })
    
            var timer = setInterval(function () {
                playLeft();
            }, 1000);
        </script>
    </body>
    
    </html>

布局顺序依次是轮播图图片，左右两个按钮，下面的点，顺序不能变，否则点击事件可能无法触发，因为我的外层是相对布局，内层都是绝对布局的，所以元素标签虽然都是绝对布局但是靠后的层级(z-index)更高。样式如上所示，可以按需更改。

首先是轮播的图片，这里的三张图都是设置成绝对布局然后全部隐藏，只有类名是active的li才能显示，当然默认显示的就是第一张。下面的小点也是显示第一个选中。左右两侧的隐藏，当鼠标放在轮播图上时才会显示。当然这里的轮播图和下面的点都可以动态生成，生成完毕的默认样子就是这样的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70][]

先写下面的小点的点击事件,last代表上次选中的点，然后如下所示，将图片和小点切换到点击的位置

var last = 0;
    $(".dots").on("click", "li", function() {
         last = $(this).index();
         $(".dots li,.inner li").removeClass("active");
         $(".inner").find("li").eq(last).addClass("active");
         $(".dots").find("li").eq(last).addClass("active");
    });

然后监听.control-btns下的div，当鼠标放到左侧的时候显示左，右侧的时候显示右

$(".control-btns>div").on("mouseout", function () {
        $(this).find("a").hide();
    });
    $(".control-btns>div").on("mouseover", function () {
        $(this).find("a").show();
    });

现在给左按钮添加点击事件，这时候整体应该是向左移（包括图片和下面的小点）。下面的小点直接删除上一次记录的active类名，将下一个小点添加active类名，上面的图片处理就是分别给当前图片及右侧图片添加特定的类名，例如我这里是给当前图片外层的li添加类名left（.left的动画就是当前页面向左移除消失），右侧图片外层的li添加类名rightnext（.rightnext的动画就是将右侧图片向左移入显示）。最后监听.rightnext动画结束事件，将类名active,left,rightnext删除，并将右侧的图片外层li添加active进行显示。这时候可以点击左无限循环了。

$('.btn-left').on('click', function () {
        playLeft();
    });
    $('.outer').on('animationend', ".rightnext", function () {
        $('.inner li').removeClass('left rightnext active');
        $(this).addClass('active');
    });
    function playLeft() {
        index = $('.inner .active').index();
        $('.inner .active').addClass('left');
        $(".dots").find("li").eq(last).removeClass("active");
        if (index == len - 1) {
             $('.inner .item').eq(0).addClass('rightnext');
             $(".dots").find("li").eq(0).addClass("active");
             last = 0;
        } else {
             $('.inner .item').eq(index + 1).addClass('rightnext');
             $(".dots").find("li").eq(index + 1).addClass("active");
             last = index + 1;
        }
    }

右的处理和左类似，点击右会让整体向右移，这时候左侧图片就是下一张图片。如下所示之后点击右侧就可以无限轮播了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70]: /images/20230528/2d090214fe114c63a515d4edecc449d6.png