自己设计的一个首尾相接js轮播图

HTML部分：

    <div class="circle">
        <img src="images\轮播图1.jpg" alt="">
        <img src="images\轮播图2.jpg" alt="">
        <img src="images\轮播图3.jpg" alt="">
        <img src="images\轮播图4.jpg" alt="">
        <img src="images\轮播图5.webp" alt="">
        <img src="images\轮播图6.webp" alt="">
        <img src="images\轮播图7.webp" alt="">
        <div class="leftar iconfont">&#xe601</div>
        <div class="rightar iconfont">&#xe601</div>
        <div style="width: 100%; position: absolute;bottom: 0.45rem;">
            <div class="libox">
                
            </div>
        </div>
    </div>

Less部分：

.circle{
    position: relative;
    width: 100%;
    height: 37.1vw;
    overflow: hidden;
    // background-color: #333333;
    >img{
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
    }
    .leftar{
        position: absolute;
        top:16vw;
        left: 0;
        width: 1.25rem;
        font-size: 1.25rem;
        color: #007aff;
        transform: rotate(180deg);
        &:hover{
            cursor: pointer;
        }
    }
    .rightar{
        position: absolute;
        top:16vw;
        right: 0;
        width: 1.25rem;
        font-size: 1.25rem;
        color: #007aff;
        &:hover{
            cursor: pointer;
        }
    }
    .libox{
        justify-content: center;
        display: flex;
        height: 0.25rem;
        >li{
            width: 0.3125rem;
            float: left;
            font-size: 0.35rem;
            color: #5d5d5d;
            opacity: .5;
            &:hover{
                cursor: pointer;
            }
        }
        >li:first-child{
            color: blue;
        }
    }
}

js部分：

const eli = '<li>'

const imglist = document.querySelectorAll('.circle img');
const lilist = document.querySelector('.libox');
const left = document.querySelector('.leftar');
const right = document.querySelector('.rightar');

let mark = 0;
let flag = 1;
let str = '';
//分割线
for (let i = 0; i < imglist.length; i++) {
    str += eli;
}

lilist.innerHTML = str;

for (let i = 0; i < imglist.length; i++) {   
    imglist[i].style.left = i*100+'%';
}
//以上是添加底部小圆点
for (let i = 0; i < lilist.children.length; i++) {
    lilist.children[i].addEventListener('click',function(){
       if (flag==1) {
        flag = 0;
        throttling();
        clearInterval(timer1);
        for (let j = 0; j < lilist.children.length; j++) {
            lilist.children[j].style.color = "#5d5d5d";
        }
        for (let j = 0; j < imglist.length; j++) {
            move(imglist[j],-parseInt(imglist[i].style.left));
        }
        lilist.children[i].style.color = "blue";
        mark = i;
        set();
       }
    });
}
//以上是为小圆点绑定事件
left.addEventListener('click',function(){
    if (flag == 1) {
        flag = 0;
        throttling();
        clearInterval(timer1);
        for (let i = 0; i < imglist.length; i++) {
            if(mark == 0) {
                adjustLeft(i);
                move(imglist[i],100);
            }
            else{
                move(imglist[i],100);
            }
        }    
        mark = mark < 1 ? imglist.length-1 : mark-1;
        trun(mark);
        set();
    }
})
//以上是为左箭头绑定事件
right.addEventListener('click',function(){
    if (flag == 1) {
        flag = 0;
        throttling();
        clearInterval(timer1);
        for (let i = 0; i < imglist.length; i++) {
            if(mark == imglist.length-1) {
                adjust(i);
                move(imglist[i],-100);
            }
            else{
                move(imglist[i],-100);
            }
        }    
        mark = mark > imglist.length-2 ? 0 : mark+1;
        trun(mark);
        set();
    }
})
//以上是为右箭头绑定事件
function trun(i){
    for (let j = 0; j < lilist.children.length; j++) {
        lilist.children[j].style.color = "#5d5d5d";
    }
    lilist.children[i].style.color = "blue";
    mark = i;
}
//以上是改变选中小圆点颜色的函数
function move(a,target){
    let chu = 50;
    let i = 0;
    let distance = target/chu;
    clearInterval(a.timer);
        a.timer = setInterval(function(){
            flag = 0;
            a.style.left = parseInt(a.style.left) + distance + '%';  
            i++;            

            if(chu==i){
                clearInterval(a.timer);
                flag = 1;
                if (mark == 0) {
                    for (let j = 0; j < imglist.length; j++) {
                        imglist[j].style.left = j*100+'%';

                    }
                }
                if (mark == imglist.length-1) {
                    for (let j = 0; j < imglist.length; j++) {
                        imglist[j].style.left = (j-(imglist.length-1))*100+'%';

                    }
                }
            }     
    },6);
}
//以上是以百分比为单位的动画函数
function adjust(i) {
    let j = parseInt(imglist[i].style.left)/100;
    j = j < 0 ? j+imglist.length : j;
    imglist[i].style.left = j*100+'%';
}
//以上实现了最后一张接第一张（只限箭头操作）
function adjustLeft(i) {
    let j = parseInt(imglist[i].style.left)/100;
    j = j >0 ? j-imglist.length : j;
    imglist[i].style.left = j*100+'%';
}
//以上实现了第一张接最后一张（只限箭头操作）
function set() {
    timer1 = setInterval(function() {
        for (let i = 0; i < imglist.length; i++) {
            if(mark == 6) {
                adjust(i);
                move(imglist[i],-100);
            }
            else{
                move(imglist[i],-100);
            }
        }    
        mark = mark > imglist.length-2 ? 0 : mark+1;
        trun(mark);
        console.log(mark);
    },3500)
}
//以上实现了自动轮播
function throttling() {
    setTimeout(function() {
        flag = 1;
        console.log('ok');
    },500);
}
//以上实现了节流阀
set();
//分割
window.onblur = function() {
    clearInterval(timer1);
}

window.onfocus = function() {
    clearInterval(timer1);
    set();
}
//以上让轮播图在后台停止运行

实现效果：