无CSS纯JS面向过程的轮播图，面试官看了也傻眼

var bns, imgList, prev, crousel, imgCon, dot, direction, x = 0, time = 200, speed = 100, pos = 0, bool = false, autoBool = true;
        const WIDTH = 1500;
        const HEIGHT = 500;
        var arr = ["left.png", "right.png", "a", "b", "c", "d", "e"];
        var title = [
            { date: "19/Dec.2020", head: "首尔｜原味秋天，当阳光遇上清风" },
            {
                date: "18/Dec.2020",
                head:
                    "六朝金粉地，最忆是金陵 | 看尽南京漫天的枫红杏黄，吃遍大街小巷地道的江浙美食",
            },
            {
                date: "17/Dec.2020",
                head:
                    "【一路向南】一个人说走就走的背包旅行，“两广三南”5省20天超长夏天",
            },
            { date: "16/Dec.2020", head: "新都桥，我爱你从秋天开始。" },
            {
                date: "15/Dec.2020",
                head: "穿越千年行，埃及十日谈！（没有套路的埃及行终将是不完整的）",
            },
        ];
        init();
        function init() {
            loadImage(arr, finishHandler, "./img/", ".jpg");//预加载图片
        }

        //处理图片格式函数
        function loadImage(srcList, fn, basePath, imgType) {
            if (basePath) {
                srcList = srcList.map(item => {
                    if (item.indexOf("/") > -1) return item;//如果数组中存在/也就是这个时候将arr中的第 1 2项挑出来
                    return basePath.slice(-1) === "/" ? basePath + item : basePath + "/" + item;//如果传进来的最后一个以/结尾就把则为item+basePath  如果没有/ 就让这个加上/
                })
            }
            if (imgType) {
                //这个是判断图片格式的可能存在jpg格式
                //先遍历 如果后五个元素中含有.  则将它返回出来
                //并且返回他自己
                srcList = srcList.map(item => {
                    if (item.slice(-5).indexOf(".") > -1) return item;
                    return item + (imgType.indexOf(".") === 0 ? imgType : "." + imgType);
                })
            }
            var img = new Image();
            img.src = srcList[0];
            img.srcList = srcList;//
            img.list = [];
            img.fn = fn;
            img.addEventListener("load", this.loadHandler)

        }
        //
        function loadHandler(e) {
            this.list.push(this.cloneNode(false)); //浅复制
            if (this.list.length === this.srcList.length) {
                if (this.fn) this.fn(this.list);
                else {
                    var evt = new Event("loadImageFinish")
                    evt.list = this.list;
                    document.dispatchEvent(evt);
                }
                return;

            }
            this.src = this.srcList[this.list.length];
        }

        function finishHandler(list) {
            //传过来的参数是arr 拿到前两项
            bns = list.splice(0, 2);//从第零项开始 删除两个元素形成的新数组,这是存放两个按钮的空数组
            imgList = list.map(item => {
                item.style.width = WIDTH + "px"
                item.style.height = HEIGHT + "px"
                return item;
            });
            createCrousel();//创建存放img的最大div
            animation();//动画帧
        }
        //设置一个ce函数 用来设置需要div的格式
        function ce(type, style, parent, prop) {
            var elem=document.createElement(type)
            Object.assign(elem.style,style);
            if (typeof parent === "string") parent = document.querySelector(parent);
            if (parent) parent.appendChild(elem);
            if (prop) Object.assign(elem, prop);
            return elem;
        }

        function createCrousel() {
            //设置最大div的样式  并且溢出隐藏
            crousel =ce("div", {
                position: "relative",
                width: WIDTH + "px",
                height: HEIGHT + "px",
                overflow: "hidden",
                margin: "auto",
            }, "body");//将创建好的大div放进body中
            createImgCon();//这个s是存放最大img创建的函数
            createDots();//这个是创建小圆点的函数
            createBns();//这个是两个按钮的小函数
            changePrev(dot.children[pos]);//这是一个改变小圆点样式的函数
            dot.style.left = (crousel.offsetWidth - dot.offsetWidth) / 2 + "px";
            bns[0].style.top = bns[1].style.top = (crousel.offsetHeight - bns[0].height) / 2 + "px";
            crousel.addEventListener("mouseenter", mouseHandler)
            crousel.addEventListener("mouseleave", mouseHandler)
        }

        function createImgCon() {
            //设置最大照片容器的函数
            imgCon = ce("div", {
                width: WIDTH * 2 + "px",
                height: HEIGHT + "px",
                position: "absolute"
            });
            imgCon.appendChild(createImgBlock(0));//默认加载好创建的第一个图所对应的相关内容包括按钮和样式，也就是进页面默认显示的那个页面
            crousel.appendChild(imgCon);
        }
        function createDots() {
            dot =ce("ul", {
                listStyle: "none",
                margin: "0",
                padding: "0",
                position: "absolute",
                bottom: "50px"
            })
            imgList.forEach((item, index) => {
                ce("li", {
                    marginLeft: index === 0 ? "0px" : "15px",//如果下标为0 则左边没有边距
                    border: "2px solid #ff9d00",
                    userselect: "none",
                    width: "15px",
                    height: "15px",
                    borderRadius: "15px",
                    float: "left"
                }, dot)
            });
            crousel.appendChild(dot);
            dot.addEventListener("click", dotClickHandler)
        }
        function createBns() {
            bns.forEach((item, index) => {
                Object.assign(item.style, {
                    position: "absolute",
                    left: index === 0 ? "50px" : "none",
                    right: index === 1 ? "50px" : "none",
                })
                crousel.appendChild(item)
                item.addEventListener("click", bnClickHandler)
            })
        }



        function createImgBlock(index) {
            var div =ce("div", {
                float: "left",
                width: WIDTH + "px",
                height: HEIGHT + "px",
                position: "relative",
            });
            div.appendChild(imgList[index]);
            //设置字体的位置以及格式
            var titleDiv = ce("div", {
                color: "white",
                position: "absolute",
                left: "250px",
                top: "50px"
            })
            var dateArr = title[index].date.split("/");//将日期分隔开
            var dateStyle = `
            font-size:24px;
            overflow:hidden;
            text-shadow:0 1px 3px rgba(0,0,0,.9);
            `;
            var dayStyle = `
                font-size:24px;
                text-shadow:0 1px 3px rgba(0,0,0,.9);
                margin:10px
            `;
            var h3 = `
            font-size:38px;
            font-weight:normall;
            text-shadow: 0 1px 3px rgab(0,0,0,.9);
            margin:10px;
            `;
        
        titleDiv.innerHTML = `
        <div style="${dateStyle}">
            <span style="${dayStyle}">${dateArr[0]}</span>${"/" + dateArr[1]}
            </div>
            <h3 style="${h3}">${title[index].head}</h3>
            `;
        div.appendChild(titleDiv);
        return div;
        }

        function mouseHandler(e) {
            if (e.type === "mouseenter") {
                autoBool = false;
                time = 200;
            } else {
                autoBool = true;
            }
        }


        function dotClickHandler(e) {
            if (bool) return;
            if (e.target.nodeName !== "LI") return;//如果点击的不是小圆点返回出去
            var index = Array.from(this.children).indexOf(e.target);
            if (index === pos) return;
            direction = index > pos ? "left" : "right";
            pos = index;
            createNextImg();
        }
        function bnClickHandler(e) {
            if (bool) return;
            if (bns.indexOf(this) === 0) {
                //点左的时候图片是往右跑的  
                direction = "right";
                pos--;
                if (pos < 0) pos = imgList.length - 1;
            }else if(bns.indexOf(this)===1){
                direction="left";
                pos++;
                if(pos>imgList.length-1) pos=0;
            }
            createNextImg();
        }
        function createNextImg() {
            if (direction = "left") {
                //如果方向是向左的 则在后面添加 然后删除
                imgCon.appendChild(createImgBlock(pos))
                imgCon.style.left = "0px";
                x = 0;
            } else if (direction === "right") {
                imgCon.insertBefore(createImgBlock(pos), imgCon.firstElementChild);//如果图片是向右走 则在前面插入一张图片
                imgCon.style.left = -WIDTH + "px";
                x = -WIDTH;
            }
            changePrev(dot.children[pos]);//创建下一个节点的时候依然要改变小圆点的样式
            bool = true;
        }
        function changePrev(elem) {
            if (prev)
                prev.style.backgroundColor = "rgb(0,0,0,0)";
            prev = elem;
            prev.style.backgroundColor = "red";
        }
        function animation() {
            requestAnimationFrame(animation);
            imgMove();
            autoPlay();
        }
        function imgMove() {
            if (!bool) return;
            if (direction === "left") {
                x -= speed;
                if (x < -WIDTH) {
                    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";
        }
        function autoPlay() {
            if (!autoBool) return;
            time--;
            if (time > 0) return;
            time = 200;
            var evt = new MouseEvent("click");
            bns[1].dispatchEvent(evt)
        }