vue实现轮播图帧率播放


Posted in Vue.js onJanuary 26, 2021

本文实例为大家分享了vue实现轮播图帧率播放的具体代码,供大家参考,具体内容如下

需求

传入一个数组,数组中放的是目录名称,通过本目录名称,读取文件目录下的所有图片,并循环播放,形成一个每1s播放多少张图片的效果,最后目录播放完毕后,在跳到第一个目录循环播放。

核心: 用 webpack的一个API require.contex读取目录下的文件名,具体想了解的可以查一查。

代码

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()">开始</button>
  <button @click="stop()">停止</button>
 </div>
 </div>
</template>

javascript

<script>
export default {
 name: 'ZxImgPlay',
 data () {
 return {
  style:[
 width:"50px",
 height:"50px"
 ],
  interval: null, // 定时器id
  flag: true, // 定时器的开关
  setIntervalNumber: 0, // 当前展示的图片下标
  imgsrc: "", // 要展示的图片路径
  imgUrls: [], // 所有的图片路径
  frameRate: 0 // 帧率
 }
 },
 computed: {},
 watch: {},
 created () { },
 mounted () {
 this.zxInit()
 },
 beforeDestroy () { },

 methods: {
 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)
 },

 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>

问题

上述这么做已经实现了功能,但是目前来说是发现了两个问题

1、require.context() 这个API它的第一个参数不能用一个可变的值,比如变量,会有警告。
2、上述代码一直更换图片的src实现的,也就是说每次换src时都会发送http请求获取图片,导致了内存不会被释放一直增加。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
如何实现vue的tree组件
Dec 03 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
vue中data里面的数据相互使用方式
Jun 05 Vue.js
VUE递归树形实现多级列表
Jul 15 Vue.js
vue 组件基础知识总结
Jan 26 #Vue.js
深入了解Vue动态组件和异步组件
Jan 26 #Vue.js
如何在 Vue 表单中处理图片
Jan 26 #Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 #Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 #Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 #Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 #Vue.js
You might like
玩转虚拟域名◎+ .
2006/10/09 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
python字典操作实例详解
2017/11/16 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
python-opencv颜色提取分割方法
2018/12/08 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
庆元旦活动总结
2014/07/09 职场文书
市场策划求职信
2014/08/07 职场文书
中学生思想品德评语
2014/12/31 职场文书
三下乡个人总结
2015/03/04 职场文书
英语读书笔记
2015/07/02 职场文书
学校财务管理制度
2015/08/04 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
python中的装饰器该如何使用
2021/06/18 Python
PHP正则表达式之RCEService回溯
2022/04/11 PHP