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组件简易模拟实现购物车
Dec 21 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 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中使用Oracle数据库(2)
2006/10/09 PHP
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
PHP中的正规表达式(二)
2006/10/09 PHP
PHP开发入门教程之面向对象
2006/12/05 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
跟老齐学Python之集合的关系
2014/09/24 Python
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
python图书管理系统
2020/04/05 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
暑期政治学习心得体会
2014/09/02 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
python爬虫--selenium模块
2021/03/31 Python