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 相关文章推荐
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
vue中activated的用法
Jan 03 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
springboot+VUE实现登录注册
May 27 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
php 无限级 SelectTree 类
2009/05/19 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
Python 异常处理的实例详解
2017/09/11 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
python编写微信公众号首图思路详解
2019/12/13 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
采用怎样的方法保证数据的完整性
2013/12/02 面试题
房屋继承公证书
2014/04/10 职场文书
分公司负责人任命书
2014/06/04 职场文书
承诺函范文
2015/01/21 职场文书
幼儿园个人总结
2015/02/28 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
js 数组 fill() 填充方法
2021/11/02 Javascript
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle