JS轮播图（左右箭头切换、按钮切换、自动轮播）

 const LEFT = Symbol(),
            RIGHT = Symbol(),
            FINISH_TIME = 200;
        var arr = [
            {
                date: "22/Feb.2022",
                title: "2021旅行记忆｜一起点亮这个世界的1%",
                src: "./img/a.jpg",
            },
            {
                date: "21/Feb.2022",
                title: "我是周末种草官|天堂应是书店和图书馆的模样",
                src: "./img/b.jpg",
            },
            {
                date: "20/Feb.2022",
                title: "【欧亚行迹】土耳其回忆录",
                src: "./img/c.jpg",
            },
            {
                date: "19/Feb.2022",
                title: "我的2021年 | 心怀远方，热爱可抵岁月漫长",
                src: "./img/d.jpg",
            },
            {
                date: "18/Feb.2022",
                title: "哈尔滨 | 有一场看雪的跨年仪式感",
                src: "./img/e.jpg",
            },
        ];
        var list = [],
            pos = 0,
            direction = LEFT,
            x = 0,
            bool = false,
            speed = 50,
            autoBool = false, //false表示鼠标还未离开
            time = FINISH_TIME;
        var imgCon, carousel, prev;
        init();

        function init() {
            carousel = document.createElement("div");
            carousel.className = "carousel";
            carousel.innerHTML = `
            <div class='img-con clear'></div>
            <ul class='dot'></ul>
            <img src='./img/left.png' class='left'>
            <img src='./img/right.png' class='right'>
          `;
            document.body.appendChild(carousel);
            createContent();
            carousel.addEventListener("click", clickHandler);
            carousel.addEventListener("mouseenter", mouseHandler);
            carousel.addEventListener("mouseleave", mouseHandler);
            animation();
            changePrev();
        }

        function createContent() {
            imgCon = document.querySelector(".img-con");
            imgCon.nextElementSibling.innerHTML = arr.reduce(
                (v) => v + "<li></li>",
                ""
            );
            imgCon.appendChild(createImg(0));
        }

        function createImg(pos) {
            if (list[pos]) return list[pos];
            var div = document.createElement("div");
            div.className = "img-item";
            div.innerHTML = `
                <div class='title'>
                    <span>${arr[pos].date.match(/^.*(?=\/)/g)[0]}</span>${arr[pos].date.match(/\/.*$/g)[0]
                }
                    <h3>${arr[pos].title}</h3>
                </div>
                <img src='${arr[pos].src}'>
           `;
            list[pos] = div;
            return div;
        }

        function mouseHandler(e) {
            autoBool = e.type === "mouseleave";
            time = FINISH_TIME;
        }

        function clickHandler(e) {
            if (bool) return;
            if (e.target.nodeName !== "LI" && e.target.nodeName !== "IMG") return;
            switch (e.target.className) {
                case "left":
                    pos === 0 ? (pos = arr.length - 1) : pos--;
                    direction = RIGHT;
                    break;
                case "right":
                    pos === arr.length - 1 ? (pos = 0) : pos++;
                    direction = LEFT;
                    break;
                default:
                    if (e.target.nodeName === "IMG") return;
                    var index = Array.from(e.target.parentElement.children).indexOf(
                        e.target
                    );
                    if (index === pos) return;
                    direction = index > pos ? LEFT : RIGHT;
                    pos = index;
            }
            createNextImg();
        }

        function createNextImg() {
            if (direction === LEFT) {
                imgCon.appendChild(createImg(pos));
                x = 0;
            } else if (direction === RIGHT) {
                imgCon.insertBefore(createImg(pos), imgCon.firstChild);
                x = -imgCon.offsetWidth / 2;
            }
            imgCon.style.left = x + "px";
            changePrev();
            bool = true;
        }

        function changePrev() {
            if (prev) {
                prev.style.backgroundColor = "transparent";
            }
            prev = imgCon.nextElementSibling.children[pos];
            prev.style.backgroundColor = "red";
        }

        // 动画效果控制
        function animation() {
            requestAnimationFrame(animation);
            imgMove();
            autoPlay();
        }

        //自动轮播
        function autoPlay() {
            if (!autoBool) return;
            time--;
            if (time > 0) return;
            time = FINISH_TIME;
            var evt = new Event("click", {
                bubbles: true,
            });
            carousel.lastElementChild.dispatchEvent(evt);
        }

        function imgMove() {
            if (!bool) return;
            if (direction === LEFT) {
                x -= speed;
                if (x <= -imgCon.offsetWidth / 2) {
                    bool = false;
                    imgCon.firstElementChild.remove();
                    x = 0;
                }
            } else if (direction === RIGHT) {
                x += speed;
                if (x >= 0) {
                    bool = false;
                    imgCon.lastElementChild.remove();
                    x = 0;
                }
            }
            imgCon.style.left = x + "px";
        }