纯js的面向对象的轮播图

面向对象的轮播图

js文件：
/*这里是封装的轮播图js,function Carousel(parent,list,bnList)—HTML进行调用时仅需输入，轮播图的父级，轮播图片

• 路径数组list、左右按钮图片路径数组。

*此轮播图特点，每次灌入新的信息前都还将之前的信息以及数据进行清空，典型的热更案例
*
*

• 整体思路：创建一个大的容器div：子①放轮播图的imgCon div；子②、子③左右按钮；子④ul

• 进行样式设置时，默认父级div和imgCon div的宽高均由内容（图片）决定；此外对父级div设置了宽高属性，也可通过设置父级div的宽高

• 改变轮播图的大小

• */
  var Carousel=(function () {
  //创建样式
  var liStyle={
  width: “20px”,
  height: “20px”,
  borderRadius:“20px”,
  backgroundColor:“rgba(255,0,0,0.1)”,
  border: “1px solid #FF0000”,
  float: “left”,
  lineHeight: “20px”,
  textAlign: “center”,
  marginLeft: “20px”,
  color:“white”
  };
  var ulStyle={
  margin:0,
  padding:0,
  listStyle: “none”,
  position: “absolute”,
  bottom: “20px”
  };
  //包含图片的div的样式
  var imgConStyle={
  position: “absolute”,
  left:“0px”
  };
  //最外层的div的样式
  var maskDivStyle={

    overflow: "hidden",
    position:"relative" ,
    margin: "auto",
    backgroundColor: "antiquewhite"
  

  };

  function Carousel(parent,list,bnList) {
  this.source=list;//存放图片路径的数组
  this.initCarousel(parent,bnList);//initCarousel里面的参数
  }
  Carousel.prototype={
  imageList:[], //图片的数组
  carousel:null, //第一个div
  _width:0, //宽和高
  _height:0,
  _source:null, //图片的路径的数组
  position:0,
  direction:"",
  bool:false, //点击
  autoBool:false, //动画
  time:0,
  timeDelay:270,
  preDot:null,
  set source(value){
  if(!value)return;
  this._source=value;
  this.width=0;
  this.height=0;
  this.direction="";
  this.position=0;
  this.imageList.length=0;
  this.loadImg(value);
  },
  get source(){
  return this._source;
  },
  set width(value){
  this._width=value;
  if(value>0){
  this.carousel.style.width=value+“px”;
  for(var i=0;i<this.carousel.firstElementChild.children.length;i++){
  this.carousel.firstElementChild.children[i].style.width=value+“px”;
  }
  }
  },
  get width(){
  return this._width
  },
  set height(value){
  this._height=value;
  if(value>0){
  this.carousel.firstElementChild.style.height=this.carousel.style.height=value+“px”;
  for(var i=0;i<this.carousel.firstElementChild.children.length;i++){
  this.carousel.firstElementChild.children[i].style.height=value+“px”;
  }
  this.resetBnPosition();
  }
  },
  get height(){
  return this._height
  },
  //图片的预加载
  loadImg:function (list) {
  var img=new Image();
  img.self=this;
  img.num=0;
  img.list=list;
  img.imgList=[];
  img.addEventListener(“load”,this.loadHandler);
  img.src=list[img.num];
  },
  //图片的侦听事件
  loadHandler:function (e) {
  //复制图片将他储存到imgList
  this.imgList.push(this.cloneNode(false));
  this.num++;
  if(this.num>this.list.length-1){
  this.removeEventListener(“load”,this.loadHandler);
  this.self.finishLoad(this.imgList);
  return;
  }
  this.src=this.list[this.num];
  },
  finishLoad:function (list) {
  var imgCon=this.carousel.firstElementChild;
  var ul=this.carousel.lastElementChild;
  this.imageList=list;
  this.clearCon(imgCon);//清除图片的容器div
  this.clearCon(ul); //清除ul
  imgCon.appendChild(this.imageList[0]); //将他添加在储存图片的数组中
  if(this.width=0){ //如果他的宽度为0则储存图片的宽度等于最大容器的宽度
  this.carousel.style.width=this.imageList[0].width+“px”;
  this._width=this.imageList[0].width;
  }else{ //如果他的宽度不为0则图片的宽度等于最大容器的宽度
  this.carousel.style.width=this.width+“px”;
  for(var j=0;j<imgCon.children.length;j++){
  imgCon.children[j].style.width=this.width+“px”;
  }
  }
  if(this.height=0){
  imgCon.style.height=this.carousel.style.height=this.imageList[0].height+“px”;
  this._height=this.imageList[0].height;
  }else{
  imgCon.style.height=this.carousel.style.width=this.height+“px”;
  for(var s=0;s<imgCon.children.length;s++){
  imgCon.children[s].style.height=this.height+“px”;
  }
  }
  //创建储存数组的循环 li跟组储存数组的数量来创建 的
  for(var i=0;i<this.imageList.length;i++){
  var li=document.createElement(“li”);
  Object.assign(li.style,liStyle);
  ul.appendChild(li);
  }
  ul.addEventListener(“click”,this.ulClickHandler);
  ul.style.left=( this.carousel.offsetWidth-ul.offsetWidth)/2+“px”;//ul的位置
  this.changeDot();
  this.resetBnPosition(); //执行左右按键
  },
  clearCon:function (con) { //清除函数
  var len=con.children.length;
  for(var i=0;i<len;i++){
  con.firstElementChild.remove();
  }
  },
  initCarousel:function (parent,bnList) { //创建容器
  if(!this.carousel){
  this.carousel=document.createElement(“div”);
  this.carousel.self=this;
  this.carousel.addEventListener(“mouseenter”,this.carouselMouseHandler);//移入移出事件
  this.carousel.addEventListener(“mouseleave”,this.carouselMouseHandler);
  Object.assign(this.carousel.style,maskDivStyle);
  var imgCon=document.createElement(“div”);
  Object.assign(imgCon.style,imgConStyle);
  this.carousel.appendChild(imgCon);
  for(var i=0;i<bnList.length;i++){
  var img=new Image();
  img.self=this;
  img.addEventListener(“load”,this.bnLoadHandler);
  img.src=bnList[i];
  img.addEventListener(“click”,this.bnClickHandler);
  var bnStyle={
  position: “absolute”
  };
  if(i===0){
  bnStyle.left=“10px”;
  }else{
  bnStyle.right=“10px”;
  }
  Object.assign(img.style,bnStyle);
  this.carousel.appendChild(img);
  }
  var ul=document.createElement(“ul”);
  ul.self=this;
  Object.assign(ul.style,ulStyle);
  this.carousel.appendChild(ul);
  parent.appendChild(this.carousel);
  }
  return this.carousel;
  },
  bnLoadHandler:function (e) {
  this.self.resetBnPosition();
  },
  resetBnPosition:function () {//左右按键高度等于div的高度减去自身的高度除以2
  this.carousel.children[1].style.top=this.carousel.children[2].style.top=(this.height-this.carousel.children[1].offsetHeight)/2+“px”;
  },
  bnClickHandler:function (e) { //左右按键点击的函数
  if(this.self.bool) return;

        if(this.offsetLeft===10){
            this.self.direction="right";
            this.self.position--;
            if(this.self.position<0) this.self.position=this.self.imageList.length-1;
        }else{
            this.self.direction="left";
            this.self.position++;
            if(this.self.position===this.self.imageList.length) this.self.position=0;
        }
        this.self.createNextImg();
    },
    ulClickHandler:function (e) {
        if(!e.target instanceof HTMLLIElement) return;
        var arr=Array.from(this.children);
        var index=arr.indexOf(e.target);
        if(index===this.self.position) return;
        this.self.direction=index>this.self.position ? "left" : "right";
        this.self.position=index;
        this.self.createNextImg();
    },
    createNextImg:function () { //创建图片
        var imgCon= this.carousel.firstElementChild;//imgCon等于最大容器的第一个子集
        imgCon.style.width=this.carousel.offsetWidth*2+"px";   //最大容器的第一个子集 等于最大容器宽度的2倍
        if(this.direction==="left"){
            imgCon.appendChild(this.imageList[this.position]);
            imgCon.style.left="0px";
        }else if(this.direction==="right"){
            imgCon.insertBefore(this.imageList[this.position],imgCon.firstElementChild);
            imgCon.style.left=-this.carousel.offsetWidth+"px";
        }
        if(this.width!==0){
            this.imageList[this.position].style.width=this.width+"px";
        }
        if(this.height!==0){
            this.imageList[this.position].style.height=this.height+"px";
        }
        this.changeDot();
        this.bool=true;
    },
    update:function () {
        this.carouselPlay();
        this.autoPlayImg();
    },
    carouselPlay:function () {
        if(!this.bool) return;
        var imgCon= this.carousel.firstElementChild;
        if(this.direction==="left"){
            imgCon.style.left=imgCon.offsetLeft-20+"px";
            if(imgCon.offsetLeft<-this.carousel.offsetWidth){
                imgCon.style.left=-this.carousel.offsetWidth+"px";
                this.bool=false;
                this.direction="";
                imgCon.firstElementChild.remove();
                imgCon.style.left="0px";
            }
        }else if(this.direction==="right"){
            imgCon.style.left=imgCon.offsetLeft+20+"px";
            if(imgCon.offsetLeft>=0){
                imgCon.style.left="0px";
                this.bool=false;
                this.direction="";
                imgCon.lastElementChild.remove();
            }
        }
    },
    autoPlayImg:function () { //动画函数
        if(!this.autoBool) return;
        this.time--;
        if(this.time>0)return;
        this.time=this.timeDelay;
        this.direction="left";
        this.position++;
        if(this.position===this.imageList.length) this.position=0;
        this.createNextImg();
    },
    carouselMouseHandler:function (e) {
        if(e.type==="mouseenter"){
            this.self.autoBool=false;
  
        }else if(e.type==="mouseleave"){
            this.self.autoBool=true;
            this.self.time=this.self.timeDelay;
        }
    },
    changeDot:function () {
        if(this.preDot){
            this.preDot.style.backgroundColor="rgba(255,0,0,0.1)";
        }
        this.preDot=this.carousel.lastElementChild.children[this.position];
        this.preDot.style.backgroundColor="rgba(255,0,0,0.6)";
    }
  

  };
  Carousel.prototype.constructor=Carousel;
  return Carousel;
  })();

html：

-->

<script>
    var arr=["imgs/a.png","imgs/b.png","imgs/c.png","imgs/d.png","imgs/e.png"];
    var arr1=["imgs/1.jpg","imgs/2.jpg","imgs/3.jpg","imgs/4.jpg"];

    var carousel=new Carousel(document.body,arr,["imgs/left.png","imgs/right.png"]);
    var carousel1=new Carousel(document.body,arr1,["imgs/left.png","imgs/right.png"]);
    function animation() {
        requestAnimationFrame(animation);
        carousel.update();
        carousel1.update();
    }
</script>

图片：