面向对象轮播图

CSS部分

 #box{
      width:400px;
      height:200px;
      position:relative;
      overflow:hidden;
      border:1px solid black;
     }

HTML部分（写一个div并添加样式）

<div id='box' ></div>

js部分

function Banner(element,width,height,timeSpace,timeLong,imgs,btnColor,changeColor,btnHeight,btnWidth,isCircle){
        this.element=element;//父元素
        this.width=width;
        this.height=height;
        this.timeSpace=timeSpace;
        this.timer=null;
        this.img = imgs;//图片的src路径
        this.ord=0;
        this.domImgs = null;//img标签

        this.lis=null;
        this.btnColor=btnColor;
        this.changeColor=changeColor;
        this.btnHeight=btnHeight;
        this.btnWidth=btnWidth;
        this.circle=isCircle;
        this.timeLong=timeLong;

        this.createEle=function(){
            for(let i=0;i<this.img.length;i++){
                this.domImgs=document.createElement("img");
                 this.domImgs.src=this.img[i];
                this.domImgs.style.cssText="position:absolute;";
                this.domImgs.style.width=this.width+"px";
                this.domImgs.style.height=this.height+"px";
                if(i==0){
                    this.domImgs.style.left=0;
                }else{
                    this.domImgs.style.left=this.width+"px";
                }
                this.element.appendChild( this.domImgs);
            }
            let uls=document.createElement("ul");
            uls.style.cssText="position:absolute;left:30%;bottom:10px;list-style:none;z-index:1;"
            for(let i=0;i<this.img.length;i++){
                let lis=document.createElement("li");
                lis.style.cssText="float:left;margin-right:5px;";
                lis.style.width=this.btnWidth+"px";
                lis.style.height=this.btnHeight+"px";
                lis.style.border="1px "+"solid "+this.changeColor;
                if(this.circle){
                    lis.style.borderRadius=50+"%";
                }
                if(i==0){
                    lis.style.background=this.changeColor;
                }else{
                    lis.style.backround=this.btnColor;
                }
                uls.appendChild(lis);
            }
            this.element.appendChild(uls);
        }

        this.autoPlay=function(){
            if(this.timer!=null){
                return;
            }
            this.timer=setInterval(()=>{
                let outOrd=this.ord;
                this.ord=this.ord+1;
                if(this.ord>=this.img.length){
                    this.ord=0;
                }
                this.showImg(outOrd,this.ord);
              },this.timeSpace);
        }
        this.showImg=function(outOrd,ord){
            let imgs=this.element.children;
            // imgs[ord].style.left = this.width+"px";
            let left1=0;
            let timeSpace=10;
            let step=Math.abs(this.width)/(this.timeLong/timeSpace);
            let direction=-1;
            let myTimer=setInterval(()=>{
                left1+=direction*step;
                if(left1<=-this.width){
                    left1=-this.width;
                    clearInterval(myTimer);
                }
                imgs[outOrd].style.left=left1+"px";
                imgs[ord].style.left=left1+this.width+"px";
            });

            let lis=this.element.lastChild.children;
            for(let i=0;i<lis.length;i++){
                lis[i].style.background=btnColor;
            }
            lis[ord].style.background=changeColor;
        }



        this.stop=function(){
            if(this.timer!=null){
                window.clearInterval(this.timer);
                this.timer= null;
            }
        }

        this.addEvent=function(){
            this.element.onmouseover=()=>{
                this.stop();
            }
            this.element.onmouseout=()=>{
                this.autoPlay();
            }

            let lis=this.element.lastElementChild.children;
            for(let i=0;i<lis.length;i++){
                lis[i].setAttribute("index",i)
                lis[i].onclick = ()=>{
                    this.goImg(parseInt(lis[i].getAttribute("index")));
                };
            }
        }
        this.goImg=function(transIndex){//2
            //1、改变数据（图片序号）
            let outIndex = this.ord;
            this.ord=transIndex;//2
            //2、边界处理
            if(this.ord>this.img.length-1 || this.ord<0){
                this.ord = 0;
            }
            //3、改变外观
            this.showImg(outIndex,this.ord);
        }
        this.createEle();
        this.addEvent();
    }



    window.onload=function(){
        let s1 = new Banner(
            document.getElementById('box'),
            400,
            200,
            3000,
            2000,
            ["./11.jpg","./12.jpg","./24.jpg","./37.jpg"],
            "transparent",
            "red",
            20,
            40,
            false,
        );
        s1.autoPlay();
    }