Vueはカルーセルのフレームレート再生を実装します

<テンプレート>
 <div id="imgPlay" ref="コンテナ" :style="[スタイル]">
 <img :src="imgsrc" :style="[{height:style.height,width:style.width}]">
 <div id="but">
  <button @click="start()">開始</button>
  <button @click="stop()">停止</button>
 </div>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前: 'ZxImgPlay',
 データ （） {
 戻る {
  スタイル：[
 幅:"50px",
 高さ:"50px"
 ]、
  間隔: null, // タイマーID
  flag: true, // タイマースイッチ setIntervalNumber: 0, // 現在表示されている画像の添え字 imgsrc: "", // 表示する画像パス imgUrls: [], // すべての画像パス frameRate: 0 // フレームレート }
 },
 計算: {},
 時計： {}、
 作成された() { },
 マウントされた（）{
 this.zxInit()
 },
 beforeDestroy() { },

 メソッド: {
 zxInit() {
 //This.DisplayParam は会社内の一連のものであり、混合オブジェクト //this.DisplayParam.frameRate は配列 ["ディレクトリ名 1", "ディレクトリ名 2"] です
 // this.DisplayParam.imgUrls はデッド イメージです。ディレクトリがない場合は、デッド イメージが使用されます。// this.DisplayParam.frameRate は受信フレーム レートです。this.frameRate = this.DisplayParam.frameRate && (1000 / this.DisplayParam.frameRate)
  this.imgUrls = this.DisplayParam.imgUrls
  this.DisplayParam.imageFileName != 0 ? this.readdir(this.DisplayParam.imageFileName) : this.showImages(true)
 },

 始める （） {
  if (this.flag) 戻り値
  this.showImages()
  this.flag = true
 },

 停止 （） {
  this.flag = false
  クリア間隔(this.interval)
 },

 画像を読み取る(画像ファイル名, _A) {
  this.stop()
  req = require.context("@/../static/images", true, /\.(?:bmp|jpg|gif|jpeg|png)$/).keys(); とします。
  パスを新しい正規表現(imageFileName[_A])とします。
  req.forEach(アイテム => {
  if (path.test(item)) {
   this.imgUrls.push({ img: "@/../static/images/" + imageFileName[_A] + item.substring(item.lastIndexOf('/')) })
  }
  })
  this.showImages()
 },
 readdir (画像ファイル名) {
  this.imgUrls = []
  (i = 0 とします; i < imageFileName.length; i++) {
  this.readImages(画像ファイル名, i)
  }
 },

 画像を表示(_B) {
  if (_B) this.imgUrls = this.imgUrlsSort(this.imgUrls, 'sort')
  コンソールログ(this.imgUrls)
  this.interval = setInterval(this.setIntervalFun、this.frameRate)
 },

 imgUrlsSort (配列、キー) {
  ary.sort((a, b) => { を返す
  x = a[キー]とします。
  y = b[キー]とします。
  ((x < y) ? -1 : (x > y) ? 1 : 0) を返します
  })
 },

 setIntervalFun() {
  this.setIntervalNumber >= this.imgUrls.length の場合 {
  this.setIntervalNumber = 0
  }
  this.imgsrc = this.imgUrls[this.setIntervalNumber++].img || ''
 }
 }
}
</スクリプト>