轮播图（面向对象）

轮播图，效果如下

一、js文件

1.Utils类

export default class Utils{
   
 static ce(type,style,parent){
   
        var elem=document.createElement(type);
        if(style){
   
            for(var prop in style){
   
                elem.style[prop]=style[prop];
            }
        }
        if(typeof parent==="string") parent=document.querySelector(parent);
        if(parent) parent.appendChild(elem);
        return elem;
    }}

2.LoadImage类

//声明LoadImage类继承EventTarget超类
export default class LoadImage extends EventTarget{
   
    list;  //预缓存的图片数组
    num=0;  //初始为0，每缓存一张照片，num++，用于遍历list内所有图片
    finishArr=[];  //将预缓存图片潜复制后加入到finishArr
    callBack;  //调用时以参数形式传入的函数，可以对全部加载完成后的finishiArr进行操作。
    static IMAGE_FINISH="imgFinish";  //为抛发事件设置常量事件名
    
    //构造函数（list： 存放图片src的数组，basePath：图片路径的相同部分；expandedName：图片的后缀名，执行最后返回finishArr数组的函数）
    constructor(list,basePath,expandedName,_callBack){
     
        
        //继承超类EventTarget内容
        super();

        //判断第二个参数是不是函数，
        if(basePath.constructor===Function)
        {
   

            //如果为函数，直接将参数内容赋给callBack
             this.callBack=basePath;

             //执行changeList函数，并把返回值赋予list
             this.list=this.changeList(list)
        }else{
   

            //如果不是函数，参数还是原来顺序，并且执行changeList函数
            this.callBack=_callBack;     
            this.list=this.changeList(list,basePath,expandedName)
        }
        //执行loadImage函数
        this.loadImage();
    }

    //changeList函数：将图片地址整合为整体的地址
    changeList(list,basePath,expandedName){
   

        //如果基础地址存在，然后判断基础地址有无/ ，然后把基础地址跟list的图片名整合，最终存入list李表里
        if(basePath){
   
            basePath=basePath.endsWith("/") ? basePath : basePath+"/";
            list=list.map(item=>basePath+item);
        }

        //如果后缀名存在
        if(expandedName){
   

            //遍历list,将list内的元素根据 . 分割
            list=list.map(item=>{
   
                var names=item.split(".")
                
                //如果list内元素包含后缀名，直接返还，如果不包含，将expandedName加在元素后部
                if(/jpg|png|jpeg|bmp|gif|webp/i.test(names[names.length-1])) return item;
                return item+(expandedName.includes(".") ? expandedName : "."+expandedName);
            })
        }
        //返还整合后的list
        return list;
    }
    //缓存图片函数
    loadImage(){
   
        //将img实例化
        var img=new Image();

        //设置监听事件，如果未加载完成，执行loadHandler函数
        this.loadFn=e=>this.loadHandler(e)
        img.addEventListener("load",this.loadFn);

        //加载图片路径，将图片缓存在浏览器里
        img.src=this.list[this.num];
    }
    loadHandler(e){
   
        //设置img为监听事件，即缓存的图片
        var img=e.currentTarget;

        //将图片浅复制，然后存入finishArr数组内
        this.finishArr.push(img.cloneNode(false));

        //通过num 遍历整个list数组，将图片所有路径依次加载一遍。即将所有图片都缓存到浏览器内，并且将所有图片浅复制后放入finishArr数组内。
        this.num++;
       
       //如果num超出数组长度，即所有图片都加载完成后，删除监听事件，监听函数置为null
        if(this.num>this.list.length-1){
   
            img.removeEventListener("load",this.loadFn);
            this.loadFn=null;

            //如果callBack参数存在，通过callBack函数对finishArr进行操作。
            if(this.callBack){
   
                this.callBack(this