摘要：輪播圖插件前言寫(xiě)這個(gè)插件的原因前段時(shí)間準(zhǔn)備用加上網(wǎng)易云的接口，模擬網(wǎng)易云音樂(lè)移動(dòng)端。目前主要實(shí)現(xiàn)了無(wú)縫輪播，自動(dòng)播放，端左右按鈕點(diǎn)擊切換，移動(dòng)端手勢(shì)滑動(dòng)切換。

前段時(shí)間準(zhǔn)備用vue加上網(wǎng)易云的nodejs接口，模擬網(wǎng)易云音樂(lè)移動(dòng)端。因?yàn)橄胱约簩?xiě)一遍所有的代碼以及加固自己的flex布局，所以沒(méi)有使用UI組件。在輪播圖部分，本來(lái)在vue里面寫(xiě)了一下，但是發(fā)現(xiàn)總是出現(xiàn)bug,所以后來(lái)準(zhǔn)備封裝一個(gè)插件來(lái)實(shí)現(xiàn)。

其次的一個(gè)原因是，以為這一學(xué)期學(xué)vue一直在用vue，發(fā)現(xiàn)自己以前學(xué)的原生js有點(diǎn)遺忘，所以想借這個(gè)機(jī)會(huì)再次復(fù)習(xí)一下js。

沒(méi)有引用第三方插件庫(kù)，原生js，封裝一個(gè)Broadcast對(duì)象，在此對(duì)象上展開(kāi)，僅僅190多行代碼。

目前主要實(shí)現(xiàn)了:無(wú)縫輪播，自動(dòng)播放，PC端左右按鈕點(diǎn)擊切換，移動(dòng)端手勢(shì)滑動(dòng)切換。

自己寫(xiě)了一部分基礎(chǔ)的css樣式，可以再次的基礎(chǔ)上修改成自己喜歡的樣式。

github地址： git倉(cāng)庫(kù)地址

演示demo： 在線瀏覽地址

PC端展示：

?

移動(dòng)端展示：

?

復(fù)制github倉(cāng)庫(kù)下面，src/js 文件下的 broadcast-me.js 放到自己項(xiàng)目文件中

復(fù)制github倉(cāng)庫(kù)下面，src/css 文件下的 broadcast-me.css 放到自己項(xiàng)目文件中

在頁(yè)面中引入:

在后面如果需要一個(gè)輪播圖，則實(shí)列化這個(gè)對(duì)象：

var box = document.getElementById("box");
var imagesAndUrl = [{
  imgSrc : "./img/1.jpg",
  linkHref : "#"
},{
  imgSrc : "./img/2.jpg",
  linkHref : "1"
},{
  imgSrc : "./img/3.jpg",
  linkHref : "#"
},{
  imgSrc : "./img/4.jpg",
  linkHref : "#"
},{
  imgSrc : "./img/5.jpg",
  linkHref : "#"
}];
// box => 你需要?jiǎng)?chuàng)建輪播圖的父級(jí)元素
// imagesAndUrl => 數(shù)組，存放圖片地址以及圖片的連接地址
var broadcast = new Broadcast(box,imagesAndUrl,{
      transitionTime : 800, // 動(dòng)畫(huà)過(guò)渡時(shí)間，默認(rèn)為800ms
      intervalTime : 5000 // 圖片切換時(shí)間，默認(rèn)為5s
 });

在vue中使用，在broadcast-me.js 文件最后加上：

// 向外界暴露Broadcas對(duì)象
module.exports = Broadcast;

在需要使用輪播的組件中，引入我們的文件

在模板文件中，采用自定義指令的方式，來(lái)插入我們的輪播圖

 imgSrc : "./img/5.jpg",
  linkHref : "#"
}

添加自定義指令：

directives:{
  broadcast:{
    inserted:function(el,binding) {
      // binding.value 為我們傳入的形參，即圖片的地址和圖片點(diǎn)擊鏈接
      var broadcast = new Broadcast(el,binding.value,{
        transitionTime : 800, // 動(dòng)畫(huà)過(guò)渡時(shí)間，默認(rèn)為800ms
        intervalTime : 5000 // 圖片切換時(shí)間，默認(rèn)為5s
      });
    }
  }
}

// 構(gòu)造的對(duì)象
new Broadcast (el,imagesAndUrl,JSON)

dom 節(jié)點(diǎn)的動(dòng)態(tài)生成

通過(guò) el 的寬度，生成一個(gè)動(dòng)態(tài)css加入到頁(yè)面當(dāng)中

// 動(dòng)態(tài)添加一些css樣式
let cssStr = `.broadcastMe .broadcastMe-list {width: ${(this.imagesAndUrl.length+2)*this.el.clientWidth}px;}.broadcastMe .broadcastMe-list .broadcastMe-item {width:${this.el.clientWidth}px;}`;

let styleNode = document.createElement("style");
styleNode.innerText = cssStr;
document.head.appendChild(styleNode)

通過(guò)字符串模板的形式，生成我們需要的且符合無(wú)縫輪播的html字符串，加載el節(jié)點(diǎn)當(dāng)中。

移動(dòng)端手勢(shì)滑動(dòng)

通過(guò)：touchstart => touchmove => touchend 完成一個(gè)滑動(dòng)的全過(guò)程，并在touchmove事件當(dāng)中，改變當(dāng)前的left值，并在touchend事件當(dāng)中判斷左右2邊的距離，進(jìn)行翻頁(yè)還是不變。

// 移動(dòng)端手指滑動(dòng)
let stratPointX = 0;
let offsetX = 0;
this.el.addEventListener("touchstart", (e) => {
  stratPointX = e.changedTouches[0].pageX;
  offsetX = this.broadcastMeList.offsetLeft;
  this.animationMark = true;
})
this.el.addEventListener("touchmove", (e) => {
  let disX = e.changedTouches[0].pageX - stratPointX;
  let left = offsetX + disX;

  this.broadcastMeList.style.transitionProperty = "none";
  this.broadcastMeList.style.left = left + "px";
})
this.el.addEventListener("touchend", () => {
  let left = this.broadcastMeList.offsetLeft;
  // 判斷正在滾動(dòng)的圖片距離左右圖片的遠(yuǎn)近，
  this.index = Math.round(-left/this.el.clientWidth);
  this.animationMark = false;
  this.render();
})

渲染函數(shù)(☆)

Broadcast.prototype.render = function () {
  // 防抖控制
  if(this.animationMark) return;

  this.animationMark = true;
  // 修改broadcastMeList 的left值
  this.broadcastMeList.style.left = (-1)*this.el.clientWidth*this.index + "px";
  this.broadcastMeList.style.transition = "left " + this.timer/1000 + "s";

  setTimeout(() => {
    // 添加判斷，防止出界
    if(this.index <= 0){
      // 無(wú)縫輪播，修改真實(shí)的left值，取消transition，造成視覺(jué)錯(cuò)誤
      this.broadcastMeList.style.transitionProperty = "none";
      this.index = this.imagesAndUrl.length;
      this.broadcastMeList.style.left = (-1)*this.el.clientWidth*this.index + "px";
    }else if (this.index > this.imagesAndUrl.length){ 
      this.broadcastMeList.style.transitionProperty = "none";
      this.index = 1;
      this.broadcastMeList.style.left = (-1)*this.el.clientWidth*this.index + "px";
    }
    this.animationMark = false;
  },this.timer)

  this.renderSpot();
}

因?yàn)椴攀鑼W(xué)淺，代碼才剛剛寫(xiě)完，測(cè)試較少，很多bug還未發(fā)現(xiàn)，如果發(fā)現(xiàn)問(wèn)題，歡迎留言指出，敬請(qǐng)斧正。謝謝??！