js用构造函数封装轮播图

用过swiper的人都知道，swiper给我们提供了许多不同形式的轮播图，它们都是用面向对象的形式封装的。本人尝试了用构造函数封装出同样的效果，封装的不好大家见谅。

首先html代码如下：

   

       

•        

•        

•        

•        

•    

     

  <

     

  >

  css代码如下：

  
  

  .box{

  width:300px;

      height:200px;

  }

  .swiper{

  overflow:hidden;

      position:relative;

      margin:0 auto;

  }

  .big{

      position:absolute;

  }

  .big li{

      float:left;

  }

  .small{

  height:20px;

      position:absolute;

  }

  .small li{

      margin-left:10px;

      background:grey;

      float:left;

  }

  .small li.active{

  background:#0F0F0F;

  }

  div{

  width:40px;

      height:40px;

      background:#0a6cd6;

      position:absolute;

  }

  最重要的js代码如下：

  首先创建一个构造函数swiper

  function Swiper(box,json) {

  this.box=document.querySelector(box);

      this.bul=document.querySelector(box+' .big');

      this.bli=document.querySelectorAll(box+' .big li');

      this.sul=document.querySelector(box+' .small');

      this.sleft=document.querySelector(box+' .left');

      this.sright=document.querySelector(box+' .right');    //获取元素

      this.timer=null;                                                           //定时器

      this.iNow=0;                                                             //计数器

      this.json=json || {};                                                   //判断有没有传参

      this.auto=this.json.autoplay ||'true';                         //是否自动轮播

      this.time=this.json.time ||2000;                                //切换时间

      this.event=this.json.event ||'click';                            //切换事件

      this.init();                                                                 //初始化

  }

  Swiper.prototype.init=function () {

  let boxwidth=this.box.offsetWidth;

      let boxheight=this.box.offsetHeight;

      this.bul.style.width=this.bli.length*boxwidth+'px';

      this.sul.style.width=this.bli.length*30+'px';

      this.sul.style.top=boxheight-this.sul.offsetHeight+'px';

      this.sul.style.left=(boxwidth-this.sul.offsetWidth)/2+'px';

      this.sleft.style.top=(boxheight-this.sleft.offsetHeight)/2+'px';

      this.sleft.style.left=10+'px';

      this.sright.style.top=(boxheight-this.sright.offsetHeight)/2+'px';

      this.sright.style.right=10+'px';                //以上为根据box的大小调节圆点和左右键的大小和位置

      for(let i=0;i

  this.bli[i].style.width=boxwidth+'px';

          this.bli[i].style.height=boxheight+'px';

          let oLi=document.createElement('li');

          this.sul.appendChild(oLi);

      }                                                          //根据图片的个数创建对应的几个圆点

  this.sli=document.querySelectorAll('.box .small li');     //获取圆点

      for(let i=0;i

  this.sli[i].style.width=20+'px';

          this.sli[i].style.height=20+'px';

      }                                                                                //设置宽高

  this.sli[0].className='active';

      var _this=this;                        //在事件内使用this的话，this指向的是最外层  的div，所以要先让                                                      指向swiper的this赋值给_this,这样使用就不会出问题了

      if(this.auto=='true'){

  this.autoplay();                             //如果有传参为true的话，则一开始就自动轮播

      }

  this.box.onmouseenter=function(){

  _this.enter();                                  //鼠标移入时，执行函数

      };

      this.box.onmouseleave=function(){

  _this.leave();                                 //鼠标移出时，执行函数

      };

      this.sleft.onclick=function () {      //点击左方向键时

  _this.iNow--;

          if(_this.iNow<0){

  _this.iNow=_this.bli.length-1;

          }

  _this.move();

      }

  this.sright.onclick=function () {         //点击右方向键时

  _this.iNow++;

          if(_this.iNow==_this.bli.length){

  _this.iNow=0;

          }

  _this.move();

      }

  for(let i=0;i

  this.sli[i]['on'+this.event]=function () {

  _this.iNow=i;

              _this.move();

          }

  }

  }

  Swiper.prototype.autoplay=function () {

  var _this=this;

      this.timer=setInterval(function () {

  _this.iNow++;

          if(_this.iNow==_this.bli.length){

  _this.iNow=0;

          }

  _this.move();

      },this.time);

  }

  Swiper.prototype.move=function () {

  for(var i=0;i

  this.sli[i].className='';

      }

  this.sli[this.iNow].className='active';

      this.bul.style.left=-this.iNow*this.bli[0].offsetWidth+'px';

  }

  Swiper.prototype.enter=function () {

  clearInterval(this.timer);

  }

  Swiper.prototype.leave=function () {

  this.autoplay();

  }

  最后我们调用构造函数时可以

   new Swiper('.box',{

       autoplay:'false', //true

       time:1000,//1000

       event:'mouseover',//click,

   });

  也可以不传参直接new Swiper('.box');