無限滑動輪播圖

話不多說，直接上代碼：

<!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才能顯示，當然默認顯示的就是第一張。下面的小點也是顯示第一個選中。左右兩側的隱藏，當鼠標放在輪播圖上時纔會顯示。當然這裏的輪播圖和下面的點都可以動態生成，生成完畢的默認樣子就是這樣的。

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

無限滑動輪播圖

DAPPER 事務 TRANSACTION

webpack不是內部或外部命令，也不是可運行的程序或批處理文件

使用bootstrap-datetimepicker遇到的問題

js回調遇到的一個問題

原生實現滑動條效果

無限滑動輪播圖

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結