Jquery实现轮播图

css实现效果

 .box {
            width: 600px;
            height: 300px;
            position: relative;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .box-img {
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .img-item {
            float: left;
            width: 600px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            font-size: 100px;
        }
        
        .img-item:nth-child(1) {
            background: #00f;
        }
        
        .img-item:nth-child(2) {
            background: #0f0;
        }
        
        .img-item:nth-child(3) {
            background: #f0f;
        }
        
        .img-item:nth-child(4) {
            background: #ff0;
        }
        
        .img-item:nth-child(5) {
            background: #00f;
        }
        
        .box-btn {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        
        .box-circle {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            text-align: center;
        }
        
        .circle-item {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin: 0 10px;
            background-color: #000;
        }
        
        .circle-item.active {
            background: #eee;
        }

html实现效果

 <div class="box">
        <div class="box-img">
            <div class="img-item">1</div>
            <div class="img-item">2</div>
            <div class="img-item">3</div>
            <div class="img-item">4</div>
        </div>
        <div class="box-circle"></div>
        <div class="box-btn">
            <button class="prev">上一页</button>
            <button class="next">下一页</button>
        </div>
    </div>

引入jquery.js

    https://code.jquery.com/jquery-3.6.0.min.js

 js代码

 <script src="./jquery-3.6.0.js"></script>
    <script>
        //克隆一张item放入box-img的后面
        function clone(ele, parent) {
            const _ele = ele.clone();
            _ele.appendTo(parent);
        }
        clone($(".img-item:first"), $(".box-img"));

        //设置box-img的宽度=item的宽度*item的长度
        let width = $(".img-item").width();
        $(".box-img").width($(".img-item").length * width);

        let index = 0;
        let flag = true; //可以防止点击次数过多flag=false为鼠标点击没有效果

        //创建指示器
        for (let i = 0; i < $(".img-item").length - 1; i++) {
            let item = $("<div class=\"circle-item\"></div>");
            console.log(i)
            if (i === 0) {
                item.addClass("active");
            }
            $(".box-circle").append(item)
        }

        function changeSlide(index) {
            $(".box-circle").children().eq(index).addClass("active").siblings(".active").removeClass("active");
        }

        //为下一页设置点击事件
        $(".box-btn").on("click", ".next", function() {
                if (flag) {
                    flag = false;
                    index++;
                    $(".box-img").animate({
                        left: -width * index
                    }, function() {
                        if (index === $(".img-item").length - 1) {
                            $(this).css({
                                left: 0
                            })
                            index = 0;
                        }
                        changeSlide(index)
                        flag = true;
                    })
                }
            })
            //为上一页设置点击事件
        $(".box-btn").on("click", ".prev", function() {
            if (flag) {
                flag = false;
                if (index === 0) {
                    index = $(".img-item").length - 1;
                    $(".box-img").css("left", "-width*index")
                }
                index--;
                $(".box-img").animate({
                    left: -width * index
                }, function() {
                    flag = true;
                    changeSlide(index)
                })

            }
        })
    </script>