前言：頁面中輪播圖，對於一個前端開發者來說，是最基本的技能，不論是的商城網站，還是企業站，輪播圖已經成為不可缺少的一個模組，而常見的輪播圖不外乎兩種，一種是漸隱漸現輪播圖，一種是無縫輪播圖。網上關於輪播圖的件也有很多，但是用人家的程式碼總會出現各種各樣的bug，我們修改bug往往要耗費很多時間，而且有些外掛的效果還不符合我們的需求，那麼我們該如何封裝一個自己的輪播外掛呢？這就是我們今天的任務，封裝輪播外掛。

1、特效離不開合理的頁面佈局，所以我們首先需要進行頁面佈局：

HTML程式碼：

<div class="container mycontainer">
  <div class="wrapper">
    <div class="slide">
      <img src="image/jd01.jpg" alt="js實現無縫輪播圖外掛封裝">
    </div>
    <div class="slide">
      <img src="image/jd02.jpg" alt="js實現無縫輪播圖外掛封裝">
    </div>
    <div class="slide">
      <img src="image/jd03.jpg" alt="js實現無縫輪播圖外掛封裝">
    </div>
    <div class="slide">
      <img src="image/jd04.jpg" alt="js實現無縫輪播圖外掛封裝">
    </div>
  </div>
  <!-- 分頁器 -->
  <ul class="pagination"></ul>
  <!-- 導航按鈕 -->
  <div class="button-pre"></div>
  <div class="button-next"></div>
</div>

2、在HTML頁面中引入css樣式檔案：css樣式檔案程式碼如下：

CSS程式碼：

* {
  margin: 0;
  padding: 0;
}

ul,li {
  list-style: none;
}

.container {  
  margin: 200px auto;
  position: relative;
  overflow: hidden;
}

.slide {
  float: left;
}

img {
  display: block;
}

.pagination {
  width: 160px;
  position: absolute;
  bottom: 30px;
  margin-left: -80px;
  left: 50%;
}

.pagination li {
  float: left;
  width: 20px;
  height: 20px;
  background-color: blue;
  margin: 0 10px;
  border-radius: 50%;
}

.button-pre,.button-next {
  width: 22px;
  height: 40px;
  position: absolute;
  top: 50%;
  margin-top: -20px;
}

.button-pre {
  left: 30px;
  background: url('../image/left.png') no-repeat center center;
}

.button-next {
  right: 30px;
  background: url('../image/right.png') no-repeat center center;
}

.pagination .active {
  background-color: red;
}
.mycontainer{
  width: 590px;
  height: 470px;
}

頁面佈局完成後，接下來就是javaScript程式碼，繫結事件；

在繫結事件之前，我們首先要知道無縫輪播圖的原理和一些技術關鍵點。
輪播圖的原理：最外層視野區域固定大小且的溢位隱藏，通過動態控制包裹圖片的父元素的marginLeft值實現輪播；
關鍵點1：最外層的盒子container固定大小，是我們的視野區域，需要設定溢位隱藏overflow：hidden；
關鍵點2：所有輪播的圖片使用一個共同的父元素wrapper包裹起來；
關鍵點3：動態克隆第一張圖片所在的元素silde，然後新增到最後；
關鍵點4：父元素wrapper的寬度為圖片個數（原始圖片個數+1，因為克隆多添加了一張圖片）乘以單獨一張圖片的寬度；

3、關鍵點梳理完之後，就可以開始javascript程式碼：通過自執行函式實現；需要在HTML頁面引入JS檔案，JS檔案程式碼如下：

JS程式碼：

;(function($){
  // 預設設定
  var defaults = {
    speed:1000,interval:2000
  }
  function Banner(ele,options){
    // 獲取元素物件
    this.element = $(ele);
    // 合併設定項
    this.options = $.extend({},defaults,options);
    // 獲取包裹圖片的父元素
    this.wrapper = this.element.children().first();
    // 獲取要克隆的元素
    this.firstChild = this.wrapper.find('.slide:first');
    // 獲取一張圖片寬度
    this.Width = this.firstChild.width();
    // 記錄圖片下標
    this.n = 0;
    // 獲取圖片個數
    this.len = this.wrapper.find('.slide').length;
    // 獲取切換導航按鈕
    this.prev = this.element.find('.button-pre');
    this.next = this.element.find('.button-next');
    // 獲取分頁器
    this.pagination = this.element.find('.pagination');
    // 計時器
    this.timer = null;
  }
  // 初始化
  Banner.prototype.init = function(){
    var self = this;    
    (function () {
      // 克隆第一張圖片並新增到元素的最後邊，設定包裹圖片父盒子的寬度
      self.wrapper.append(self.firstChild.clone(true));
      self.wrapper.css({ width:self.Width * (self.len + 1)});
      // 生成對應的分頁器按鈕
      for(var i = 0; i < self.len; i++){
        $('<li></li>').appendTo(self.pagination); 
      }
      // 動態設定分頁器的樣式
      self.pagination.find('li:first').addClass('active');
      var btnWidth = self.pagination.find('li:first').outerWidth(true) * self.len;
      self.pagination.css({width:btnWidth,marginLeft:-btnWidth / 2})
    })() 
    // 呼叫所有繫結的事件
    this.nextClick();  
    this.preClick();  
    this.btnClick();
    this.autoPlay();
    this.clearPlay(this.element);
  }
  // 切換下一張圖片事件
  Banner.prototype.nextClick = function(){
    var self = this;
    this.next.click(function(){
      self.moveNext();
    })
  }
  // 切換圖片，同時也為實現自動播放
  Banner.prototype.moveNext = function() {
    this.n++;
    // 判斷重置時機和重置樣式
    if (this.n > this.len ) {
      this.n = 1;
      this.wrapper.css({ marginLeft: 0 });
    }
    this.changeBtn(this.n > 3 ? 0 : this.n);
    this.wrapper.stop(true,true).animate({ marginLeft: -this.Width * this.n },this.options.speed)
  }

  // 點選切換上一張圖片
  Banner.prototype.preClick = function(){
    var self = this;
    this.prev.click(function () {
      self.n--;
      if (self.n < 0) {
        self.n = self.len - 1;
        self.wrapper.css({ marginLeft: -(self.len) * self.Width });
      }
      self.changeBtn(self.n < 0 ? self.n = 3 : self.n);
      self.wrapper.animate({ marginLeft: -self.Width * self.n },self.options.speed)
    })
  }
  // 點選分頁器切換圖片
  Banner.prototype.btnClick = function(){
    var self = this;     
     this.pagination.find('li').click(function () {
      var index = $(this).index();
      self.n = index;
      self.changeBtn(index);
      self.wrapper.animate({ marginLeft: -self.Width * index },self.options.speed)
    })
  }
  // 動態修改分頁器按鈕的樣式
  Banner.prototype.changeBtn = function(index){
    this.pagination.find('li').eq(index).addClass('active').siblings().removeClass('active');
  }
  // 自動輪播
  Banner.prototype.autoPlay = function(){
    var self = this;
    /* 計時器中呼叫函式是，函式中的this 指向 window， 所以需要使用self.timer = setInterval(function(){
       self.moveNext();
     },2000);
     不能直接使用 self.timer = setInterval(self.moveNext(),2000); 形式 */
    self.timer = setInterval(function(){
      self.moveNext();
    },self.options.interval);
  }
  // 清除自動播放
  Banner.prototype.clearPlay = function(ele){
    var self = this;
    ele.mouseenter(function(){
      clearInterval(self.timer)
    }).mouseleave(function(){
      // 再次開啟自動輪播
      self.timer = setInterval(function(){
        self.moveNext();
      },self.options.interval);
    })
  }
  // jQuery外掛實現
$.fn.myBanner = function(params){
    // params 是自定義的配置項
    var banner = new Banner(this,params);
    banner.init();
    // 如果需要鏈式呼叫
    return this;
  }
})(jQuery)

最後在HTML頁面中進行初始化，最好放到HTML結束標籤之前的位置，因為我們封裝的外掛是依賴於jQuery的，因此首先引入jQuery檔案，然後在引入我們自己封裝的js檔案；最後就是進行初始化設定：

<script>
  $(function(){
     $('.mycontainer').myBanner({
      // speed:圖片切換速度
      // interval：圖片切換的時間間隔
       speed:500,interval:3000
     });
  })
 

</script>

到此為止，我們已經實現了輪播外掛的封裝並且實現了複用，只需要動態的繫結不同的元素mycontainer（可以動態修改成自己的元素名字）即可實現複用。

4、如果需要修改容器的大小和圖片的大小,可以直接覆蓋樣式即可：

.mycontainer2{
  width: 300px;
  height:200px;
}
.mycontainer2 img{
  width: 300px;
  height:200px;
}

5、完成。恭喜你，你的輪播外掛可以正常切換了

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。