カルーセル図プラグイン（Broadcast.js）

はじめに：このプラグインを作成する理由

ヨークVUEクラウドnodejsインタフェース、アナログ網易クラウド音楽移動端を添加することにより、以前に調製。私は再びすべてのコードを書きたいとそれらのフレックスレイアウトを強化しているので、そうは使用UIコンポーネントはありません。部分カルーセルのビューでは、もともと私はVUEの内部にについて書いたが、常に達成するために、パッケージのプラグインを用意それでは、バグ現れました。
第二には、この学期はVUE VUE使用されているということである一つの理由は、私が発見したネイティブJSは少し忘れて学んだown'veので、jsのを確認し、再びこの機会を利用したいと思います。

はじめに＆ファンクション

サードパーティ製のプラグインライブラリ、ネイティブJS、ブロードキャストパッケージオブジェクトへの参照ありません、単にコードの190行の上に、このオブジェクトに展開します。
現在では主な成果：シームレスカルーセル、自動再生、PC側についてのトグルボタンをクリックして、モバイル端末ジェスチャースライドスイッチ。
私は、CSSスタイルのベースの部分はお好みのスタイルに再び基づいて変更することができ書きました。

ディスプレイインターフェイスと使用

アドレスgithubの：gitのリポジトリアドレス
デモデモ：オンラインブラウジングアドレス
PC側のショー：
モバイル端末表示：

使用法

通常のページ参照

、以下のgithubのリポジトリをコピーしsrc/js たファイルの下にbroadcast-me.js、独自のプロジェクト・ファイルに
、以下のgithubのリポジトリをコピーしsrc/cssたファイルの下にbroadcast-me.css、独自のプロジェクト・ファイルに

ページ内に導入されたシステム：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 引入插件的css文件 -->
  <link rel="stylesheet" href="./css/broadcast-me.css">
</head>
<body>
  <!-- 引入插件的js文件 -->
  <script src="./js/broadcast-me.js"></script>
</body>
</html>

必要性は、後に図を回転した場合、このオブジェクトはソリッド列です。

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 => 你需要创建轮播图的父级元素
// imagesAndUrl => 数组，存放图片地址以及图片的连接地址
var broadcast = new Broadcast(box,imagesAndUrl,{
      transitionTime : 800, // 动画过渡时间，默认为800ms
      intervalTime : 5000 // 图片切换时间，默认为5s
 });

VUEは、引用されました

VUEでは、broadcast-me.jsファイルの追加の終わり：

// 向外界暴露Broadcas对象
module.exports = Broadcast;

カルーセルで組み立て、私たちのファイルの導入をを使用する必要があります

このフレームワークVUEで

テンプレートファイルには、私たちのカルーセル図を挿入するためのカスタムコマンドの方法を使用して

<template>
  <div class="broadcast" v-broadcast="broadcastImg">
     <!-- 自定义指令broadcast，，形参 => broadcastImg 为我们的轮播图数据 -->
  </div>
</template> imgSrc : './img/5.jpg',
  linkHref : '#'
}

カスタム命令を追加します。

directives:{
  broadcast:{
    inserted:function(el,binding) {
      // binding.value 为我们传入的形参，即图片的地址和图片点击链接
      var broadcast = new Broadcast(el,binding.value,{
        transitionTime : 800, // 动画过渡时间，默认为800ms
        intervalTime : 5000 // 图片切换时间，默认为5s
      });
    }
  }
}

API

// 构造的对象
new Broadcast (el,imagesAndUrl,JSON)

プロパティ	説明	メモメモ
インクルード	あなたは小包のカルーセル（親）要素のマップを作成する必要があります	エラーを記述しないでください。
imagesAndUrl	絵の画像とアドレスアドレスリンク。リンク上のオブジェクトlinkHref =>画像のクリックの配列; IMGSRC =>写真住所	エラーを記述しないでください。
JSON	transitionTime =>アニメーション遷移時間、intervalTime =>アニメーション切替時間	デフォルト：時間=> 5秒のスイッチング遷移時間=> 800ms

コーディングのアイデア

動的ノードDOMを生成します

幅ELは、そのCSS動的ページを生成するために添加されます

// 动态添加一些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)

文字列テンプレートによって、我々は、HTML文字列をシームレスかつノード間のカルーセル、EL負荷と矛盾を生成する必要があります。

摺動自在に終了ジェスチャーを動かします

：touchstart => touchmove => touchendスライドの全体のプロセスを完了し、touchmove入射、左側の現在の値を変更し、そして約2側がtouchend事件で決定、または同じページのから。

// 移动端手指滑动
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;
  // 判断正在滚动的图片距离左右图片的远近，
  this.index = Math.round(-left/this.el.clientWidth);
  this.animationMark = false;
  this.render();
})

レンダリング機能（☆）

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){
      // 无缝轮播，修改真实的left值，取消transition，造成视觉错误
      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();
}

遂に

Caishuxueqianは、単にコードを書き終えた、以下の問題が検出された場合のテスト、多くのバグが発見されていないので、歓迎のメッセージは、してください論文を指摘しました。ありがとうございます！！

ネイティブjsはカルーセルプラグイン（サポートVUE）のシームレスなビューを作成します