jquery簡單實作無縫可滑動輪播圖

話不多說，直接上代碼：

<!DOCTYPE html>
<html >

<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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="btn-left">左</a>
            </div>
            <div>
                <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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才能顯示，當然預設顯示的就是第一張。下面的小點也是顯示第一個選中。左右兩側的隐藏，當滑鼠放在輪播圖上時才會顯示。當然這裡的輪播圖和下面的點都可以動态生成，生成完畢的預設樣子就是這樣的。

jquery簡單實作無縫可滑動輪播圖

先寫下面的小點的點選事件,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;
    }
}

右的處理和左類似，點選右會讓整體向右移，這時候左側圖檔就是下一張圖檔。如下所示之後點選右側就可以無限輪播了。

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-right').on('click', function () {
     playRight();
});
$('.outer').on('animationend', ".leftnext", function () {
     $('.inner li').removeClass('right leftnext active');
     $(this).addClass('active');
});

jquery簡單實作無縫可滑動輪播圖

繼續閱讀

請求逾時VUE axios重新再次請求

IE8 CSS設定DIV居中，添加“margin:0 auto”

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

jquery_126_demo

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條