我写的轮播动画,为什么圆点的背景色变化与图片播放不同步

问题遇到的现象和发生背景

底部圆圈的背景改变不是对应图片顺序是怎么回事

问题相关代码，请勿粘贴截图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div, img {
            width: 600px;
            height: 600px;
            float: left;
            position: relative;
        }

        #kuang_jia {
            overflow: hidden;
        }

        #img_list {
            width: 3600px;
        }

        /*  上面设置自动轮播  */
        .zuo_you {
            position: absolute;
            top: 35%;
            display: none;
        }

        .zuo, .you {
            float: left;
            height: 50px;
            width: 30px;
            font-size: 50px;
            background-color: white;
        }

        .you {
            float: right;
        }

        .zuo span {
            margin-left: -15%;
        }

        span {
            position: relative;
            top: -20%;
        }

        /*  上面设置左右箭头  */
        #bq {
            margin: 0 auto;
            position: absolute;
            left: 105px;
            top: 540px;
            background-color: darkgray;
            width: 60%;
            height: 50px;
            border-radius: 100px;
            /*  设置边框圆化  */
        }

        div [class ^= biao_qian] {
            background-color: white;
            width: 30px;
            height: 30px;
            margin-left: 40px;
            position: relative;
            border-radius: 50%;
            /*  让div变成圆  */
            top: 10px;
            left: -15px;
        }
        /*  设置底部标签样式  */
    </style>
</head>
<body>
<div id="kuang_jia">
    <div id="img_list">
        <img src="1.jpg" alt="图片加载失败">
        <img src="2.jpg" alt="图片加载失败">
        <img src="3.jpg" alt="图片加载失败">
        <img src="4.jpg" alt="图片加载失败">
        <img src="5.jpg" alt="图片加载失败">
        <img src="1.jpg" alt="图片加载失败">
    </div>
    <div class="zuo_you">
        <p class="zuo">
            <span>
                &lt;
            </span>
        </p>
        <p class="you">
            <span>
                &gt;
            </span>
        </p>
    </div>
    <!--  箭头div必须放在图片div的后面,否则不显示  -->
    <div id="bq"></div>
</div>
<div id="div"></div>
</body>
<script src="../../../jquery-3.6.0.min.js"></script>
<script>
    //添加底部标签并设置样式
    var Count = 1;
    var img_count = $("img").length;
    var bq = $("#bq");
    bq.fadeTo(0, 0.5);

    function bq_color_white(value) {
        value.css({backgroundColor: "white"});
    }

    function bq_color_red(value) {
        value.css({backgroundColor: "red"});
    }

    var kl;
    var div = $("#div");
    for (var i = 1; i < img_count; i++) {
        kl = div.clone(true);
        bq.append(kl);
        kl.attr("class", "biao_qian" + i);
    }
    div.hide();
    bq_color_red($(".biao_qian1"));

    function bian_se() {
//此处的问题
        for (var i = 1; i < img_count; i++) {
            if (i === Count) {
                bq_color_red($(".biao_qian" + i));
            }else {
                bq_color_white($(".biao_qian" + i));
            }
        }
    }
</script>
<script>
    //设置自动轮播
    var list = $("#img_list");

    function lun() {
        if (Count === img_count) {
            list.css({left: 0});
            //回去时瞬间回去,不要动画
            Count = 1;
            bian_se();
            setTimeout(function () {
                list.animate({left: -600}, 1000);
            }, 100);
        }else {
            bian_se();
            list.animate({left: -600 * Count}, 1000);
        }
        Count++;
        //回去后立即执行下一个动画,这样看起来更加自然
    }

    var set = setInterval(lun, 2000);
    //通过设置最后一张图片与第一张图片一样,进行轮播,当播到最后一张图后,瞬间回到第一张图,然后继续播放
</script>
<script>
    //设置鼠标移入移出样式
    var kuang_jia = $("#kuang_jia");
    kuang_jia.on("mouseenter", function () {
        clearInterval(set);
        $(".zuo_you").show();
        $("#bq").show();
    });
    kuang_jia.on("mouseleave", function () {
        clearInterval(set);
        set = setInterval(lun, 2000);
        $(".zuo_you").hide();
        $("#bq").hide();
    });
</script>
<script>
    //设置左右点击移动
    function zhi_zhen_css(value) {
        value.on("mouseenter", function () {
            value.css({cursor: "pointer"})
        });
    }

    var zuo = $(".zuo");
    var you = $(".you");
    zhi_zhen_css($("span"));
    zuo.on("click", function () {
        Count--;
        if (Count < 1) {
            list.css({left: -3000});
            Count = img_count - 2;
        }
        bian_se();
        list.animate({left: -600 * Count}, 1000);
    });
    you.on("click", lun);
    //当切换到最后一张图(第一张图)并点击右侧(左侧)按钮时,将跳过第一张图(最后一张图),直接执行下一个动画,也就是直接切换到下一张图
</script>
</html>
运行结果及报错内容

具体的你们运行一下就知道了

这不是有吗?对不上的话，给i加1

img