Realization of Carousel Frame Rate Play by vue

In this paper, we share the specific code of vue to realize the frame rate playback of carousel for your reference. The specific contents are as follows

Demand

Pass in an array, and the directory name is placed in the array. Through this directory name, read all the pictures under the file directory and play them cyclically, forming an effect of how many pictures are played every 1s. After the final directory is played, skip to the first directory and play them cyclically.

Core: webpack API require. contex read directory under the file name, specific want to know can check 1 check.

Code

HTML

<template>
 <div id="imgPlay" ref="container" :style="[style]">
 <img :src="imgsrc" :style="[{height:style.height,width:style.width}]">
 <div id="but">
  <button @click="start()"> Begin </button>
  <button @click="stop()"> Stop </button>
 </div>
 </div>
</template>

javascript

<script>
export default {
 name: 'ZxImgPlay',
 data () {
 return {
  style:[
 width:"50px",
 height:"50px"
 ],
  interval: null, //  Timer id
  flag: true, //  Switch of timer 
  setIntervalNumber: 0, //  Subscript of the currently displayed picture 
  imgsrc: "", //  The path of the picture to be displayed 
  imgUrls: [], //  All picture paths 
  frameRate: 0 //  Frame rate 
 }
 },
 computed: {},
 watch: {},
 created () { },
 mounted () {
 this.zxInit()
 },
 beforeDestroy () { },

 methods: {
 zxInit () {
 //  Here's  this.DisplayParam  It's internal to the company 1 Set of things, mixed objects 
 // this.DisplayParam.frameRate  Yes 1 Array of numbers [" Directory name 1"," Directory name 2"]
 // this.DisplayParam.imgUrls  It's a dead graph. When there is no directory, use a dead graph 
 // this.DisplayParam.frameRate  Is the incoming frame rate 
  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)
 },

 start () {
  if (this.flag) return
  this.showImages()
  this.flag = true
 },

 stop () {
  this.flag = false
  clearInterval(this.interval)
 },

 readImages (imageFileName, _A) {
  this.stop()
  let req = require.context("@/../static/images", true, /\.(?:bmp|jpg|gif|jpeg|png)$/).keys();
  let path = new RegExp(imageFileName[_A])
  req.forEach(item => {
  if (path.test(item)) {
   this.imgUrls.push({ img: "@/../static/images/" + imageFileName[_A] + item.substring(item.lastIndexOf('/')) })
  }
  })
  this.showImages()
 },
 readdir (imageFileName) {
  this.imgUrls = []
  for (let i = 0; i < imageFileName.length; i++) {
  this.readImages(imageFileName, i)
  }
 },

 showImages (_B) {
  if (_B) this.imgUrls = this.imgUrlsSort(this.imgUrls, 'sort')
  console.log(this.imgUrls)
  this.interval = setInterval(this.setIntervalFun, this.frameRate)
 },

 imgUrlsSort (ary, key) {
  return ary.sort((a, b) => {
  let x = a[key];
  let y = b[key];
  return ((x < y) ? -1 : (x > y) ? 1 : 0)
  })
 },

 setIntervalFun () {
  if (this.setIntervalNumber >= this.imgUrls.length) {
  this.setIntervalNumber = 0
  }
  this.imgsrc = this.imgUrls[this.setIntervalNumber++].img || ''
 }
 }
}
</script>

Problem

The above has already realized the function, but at present, two problems have been found

1. require. context () This API cannot use a variable value for its first parameter, such as a variable, and there will be a warning.
2. The above code 1 is realized by replacing pictures directly with src, that is to say, every time src is replaced, http will be sent to request to obtain pictures, resulting in memory not being released.