补充上面两个问题的js文件（有两个问题 分别是html和css的内容太长说需要审核）

相关代码：js

/*
 * 轮播图特效
 * 日期：2021年9月17日
 * 姓名：lu
 */

// 这里用IIFE是因为防止产生的变量影响全局变量
(function () {
    //得到DOM元素
    var carousel_list = document.getElementById('carousel_list');
    var left_btn = document.getElementById('left_btn');
    var right_btn = document.getElementById('right_btn');
    var circle_ol = document.getElementById('circle_ol');
    var circle_lis = document.getElementsByTagName('li');

    //克隆第一张li
    var clone_li = carousel_list.firstElementChild.cloneNode(true);
    //上树
    carousel_list.appendChild(clone_li);

    //当前正在显示的图片号
    var idx = 0;
    //节流锁
    var lock = true;
    //接收定时器
    var timer;
    //右按钮添加监听
    right_btn.addEventListener('click', function () {
        //如果为false则不执行一下语句
        if (!lock) return;
        //如果是true,则上锁为了不多次点击触发
        lock = false;
        //添加过渡动画
        carousel_list.style.transition = 'transform .5s ease 0s';
        //图号自增
        idx++;
        //拖动
        carousel_list.style.transform = 'translateX(' + -16.66 * idx + '%)';
        //判断图号是否为最后一张克隆图
        if (idx == 5) {
            //设置延时器，当图号为5时，触发一次
            setTimeout(function () {
                //回到第一张图
                idx = 0;
                //瞬间回到
                carousel_list.style.transition = 'none';
                //拉动
                carousel_list.style.transform = 'translateX(' + -16.66 * idx + '%)';
            }, 500);
        }
        //设置小圆点
        setCircles();

        //当执行完以上语句，延时器让节流锁打开
        setTimeout(function () {
            lock = true;
        }, 500);
    }, false);

    //左按钮添加监听
    left_btn.addEventListener('click', function () {
        if (!lock) return;
        lock = false;
        //判断图号是否为第一张图，然后瞬间替换为克隆图
        if (idx == 0) {
            //过渡取消，瞬间回到
            carousel_list.style.transition = 'none';
            //拉动到最后一张图
            carousel_list.style.transform = 'translateX(' + -16.66 * 5 + '%)';
            //改变idx值
            idx = 4;
            //小技巧，延时0毫秒，额可以让刚才取消的过渡加上
            setTimeout(function () {
                //加过渡
                carousel_list.style.transition = 'transform .5s ease 0s';
                //过渡动画
                carousel_list.style.transform = 'translateX(' + -16.66 * 4 + '%)';
            }, 0);
        } else {
            idx--;
            carousel_list.style.transform = 'translateX(' + -16.66 * idx + '%)';

        }
        //设置小圆点
        setCircles();

        //当执行完以上语句，延时器让节流锁打开
        setTimeout(function () {
            lock = true;
        }, 500);
    }, false);

    //这只小圆点的current在谁身上，序号为idx的小圆点才有current类名，其他的li没有
    function setCircles() {
        //遍历，遍历0-4，每遍历一个数字与当前idx对比，相同则添加类名current，不同则去掉类名
        for (var i = 0; i <= 4; i++) {
            if (i == idx) {
                circle_lis[i].className = 'current';
            } else {
                circle_lis[i].className = '';
            }
        }
    };
    //自动轮播
    // function autoPlay() {
    //     timer = setInterval(function () {
    //         idx++;
    //         carousel_list.style.transition = 'transform 1s ease 0s';
    //         if (idx == 5) {
    //             idx = 0;
    //             carousel_list.style.transition = 'none';
    //             carousel_list.style.transform = 'translateX(' + -16.666 * idx + '%)';
    //         };
    //         carousel_list.style.transform = 'translateX(' + -16.666 * idx + '%)';
    //     }, 2000);
    // }
    // autoPlay();

    //当鼠标移入，停止自动轮播
    // carousel_list.onmouseenter = function () {
    //     clearInterval(timer);
    // }

    //当鼠标移入，停止自动轮播
    // carousel_list.onmouseleave = function () {
    //     autoPlay();
    // }
})();