轮播图（无限滚动）

介绍：该轮播图实现了首尾无缝链接的滚动形式

思路：复制第一个元素添加到最后一个元素的后面，复制最后一个元素添加到第一个元素的前面

代码说明

html部分：

<div id="banner1">
        <!-- 轮播图容器 -->
        <ul class="imglist">
            <li class="first"><img src="./image/12.jpg" alt=""></li>
            <li class=""><img src="./image/13.png" alt=""></li>
            <li class=""><img src="./image/14.jpg" alt=""></li>
            <li class=""><img src="./image/15.jpg" alt=""></li>
            <li class="last"><img src="./image/16.jpg" alt=""></li>
        </ul>
        <!-- 左右切换按钮 -->
        <a href="#" class="btn preBtn"><img src="./image/left.png" alt="" width="35"></a>
        <a href="#" class="btn nextBtn"><img src="./image/right.png" alt="" width="35"></a>
        <!-- 页面指示器 -->
        <ul class="bullet">
            <li class="active"><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
</div>

css部分：

<style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        .hb {
            display: none;
        }

        #banner1 {
            width: 400px;
            height: 290px;
            margin: 0 auto;
            overflow: hidden;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* top: 160px; */
        }

        #banner1 .imglist {
            position: relative;
        }

        #banner1 .imglist li {
            width: 400px;
            float: left;
        }

        #banner1 .imglist li img {
            width: 100%;
            height: 1005;
        }

        /* 页面指示器 */
        .bullet {
            position: absolute;
            left: 32%;
            bottom: 25%;
        }

        .bullet li {
            display: inline-block;
            margin: 5px;
            width: 15px;
            height: 3px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        .bullet li a {
            display: block;
            width: 100%;
            height: 100%;
        }

        .bullet li.active {
            background-color: #ccc;
        }

        /* 左右切换按钮 */
        .btn {
            position: absolute;
            top: 39%;
            transform: translate(0, -50%);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            /* border: 1px solid #ccc; */
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.3;
        }

        .btn:hover {
            opacity: 1;
        }

        .btn span {
            color: #ccc;
            font-size: 20px;
        }

        .preBtn {
            left: 15px;
        }

        .nextBtn {
            right: 15px;
        }
</style>

js部分

    <script>
        $(document).ready(function () {
            // 定时器空变量
            var timer = null;
            // 初始下标
            var index = 0;
            // 单个窗口的宽度
            var imgwidth = $(".imglist li").width();
            // 未复制前元素长度
            var imglenth = $(".imglist li").length;
            // 获取父容器
            var imgct = $(".imglist");

            // 克隆第一张和最后一张，放置结尾和开头
            $('.imglist').append($(".first").clone());
            $('.imglist').prepend($(".last").clone());

            // 设置轮播图宽度
            var totalWidth = imgwidth * (imglenth + 2);
            $(".imglist").css("width", totalWidth + "px");
            // 设置默认第一张图片的位置
            $(".imglist").css("left", -imgwidth + "px");

            // 轮播运动方法
            function run() {
                $("#banner1 .imglist").animate({
                    left: "-=" + imgwidth + "px",
                }, function () {
                    index++
                    if (index > imglenth - 1) {
                        imgct.css('left', -imgwidth + 'px')
                        index = 0;
                    };
                    setBullet();
                });
            }
            // 页面指示器
            function setBullet() {
                $(".bullet li").eq(index).addClass('active')
                    .siblings().removeClass('active')
            }

            // 定时器
            function play() {
                timer = setInterval(run, 2000);
            }
            // 默认启动定时器
            play();

            // 清除定时器
            function clearplay() {
                clearInterval(timer);
            }
            // 鼠标移入/移出事件
            $("#banner1").on('mouseout', function () {
                play();
            });
            $("#banner1").on('mouseover', function () {
                clearplay();
            })
            // 下一张
            $(".nextBtn img").click(function () {
                run();
            });
            // 上一张
            $(".preBtn img").click(function () {
                $("#banner1 .imglist").animate({
                    left: "+=" + imgwidth + "px",
                }, function () {
                    index--
                    if (index < 0) {
                        imgct.css('left', -imgwidth * imglenth + 'px')
                        index += imglenth;
                    };
                    setBullet();
                });
            })
            // 点击指示器切换
            $(".bullet li").click(function () {
                console.log(index)
                $("#banner1 .imglist").animate({
                    left: "-=" + ($(this).index() - index) * imgwidth + "px",
                });
                // 重置下标为点击的下标
                index = $(this).index();
                setBullet();
            })
        })
    </script>

效果