Vue——自动切换图片
利用属性指令 + setInterval(是一个实现定时调用的函数)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<img v-bind:src="img[currentIndex]" alt="" @click="handleClick2">
<div>
<button @click="handleClick">点我切换</button>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
img: [
'img/1.png',
'img/2.png',
'img/3.png',
'img/4.png',
'img/5.png',
'img/6.png',
'img/7.png',
'img/8.png',
],
currentIndex: 0,
timer: null,
},
methods: {
handleClick() {
this.timer = setInterval(() => {
this.currentIndex = (this.currentIndex + 1) % this.img.length;
}, 1000);
},
handleClick2() {
clearInterval(this.timer);
},
},
})
</script>
</html>
补充延时任务和定时任务
setTimeout(function(){},3000) # 3s后执行匿名函数 延时任务
var t=setInterval(function(){},3000) # 每隔3s执行匿名函数 定时任务
clearInterval(t) # 停止定时任务
t=null
Vue——自动切换图片的更多相关文章
- Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片
Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...
- JQury自动切换图片
[标签]Jquery图片自动切换<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- 《ASP.NET1200例》高亮显示ListView中的数据行并自动切换图片
aspx <script type="text/javascript"> var oldColor; function SetNewColor(Source) { ol ...
- vue动态切换图片
1.踩的一个坑是:直接获取对象,使用style改变其背景图地址或者对img标签改变src值 因为经过vue经过打包编译后,图片地址已经被处理了,这时更新地址是无效的,会找不到图片. 所以可以用多个标签 ...
- js自动切换图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js+css3实现图片自动切换，图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- Jquery的动态切换图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用定时器通过改变图片的src来切换图片
点击以后开始自动切换图片 $("#page3_cover_1_back").click(function(){ var i=3; var haha=setInterval(func ...
- 广告banner：手动滑动切换，自动切换，点击跳转，异步加载网络图片
效果图: 该banner功能有自动切换图片,点击图片可以自定义事件,手动滑动切换,异步加载图片 代码说话: 布局文件: <!-- 广告位 --> <FrameLayout andro ...
- 获取bing.com的图片并在gnome3中设置自动切换
发现 bing.com 上的图片很好看,因此打算每天把 bing.com 的图片下载下来,用作桌面. 需要做的是两个部分,爬取图片到目录和设置目录图片为桌面背景并可以自动切换. 第一部分,下载图片,使 ...
随机推荐
- 浅谈Zabbix与Prometheus区别
Zabbix和Prometheus都是非常流行的监控系统.它们有许多相似之处,但也有一些不同之处.以下是Zabbix和Prometheus监控对比的一些关键点: 1.数据模型和查询语言 Prometh ...
- 测试打包失败 已解决 分析过程 - 关键字 Jenkins nexus package-lock.json npm install build
Jenkins 打包失败 npm run build 总是失败,每次失败报错还不一样. 然后 npm install 每次安装 还总有包超时 MobaXterm1_CHS1 SSH 链接,手工安装也不 ...
- Android Swtich开关样式调整
原文:Android Swtich开关样式调整 - Stars-One的杂货小窝 接入百度人脸的demo时候,发现了内置的switch开关比较好看,看了下实现方法,原来只是改了下样式,记录一下 效果: ...
- display标签交替显示不同行颜色
问题 想要一个更加简单的支持列表数据分页和排序的方法. 解决方案 使用Display标签库和JSP标签库. 例4.13介绍了一个JSP页,它使用4.5节中的数据模型显示美国总统列表.这个JSP页面使用 ...
- CC++ 如何确定一个变量的类型（恶心的指针）
如何确定一个变量的类型 目录 如何确定一个变量的类型 1.如果一个变量声明中没有括号 2.变量声明中有括号 3.检测一下(逐渐变态··· 4.总结 1.如果一个变量声明中没有括号 如果一个变量声明中没 ...
- JS原生2048小游戏源码分享
最近在学习算法方面的知识,看到了一个由算法主导的小游戏,这里给大家分享下代码: 效果: 代码: <head> <meta charset="UTF-8"> ...
- uniapp如何给空包进行签名操作
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 首先安装sdk https://www.oracle.com/java/technologies/downloads/ 正常下一步即可~安 ...
- java 计算两个date日期相差天数或者时间差
相差天数计算: /** * 相差天数计算 */ public int differentDaysByMillisecond(Date date1, Date date2) { return Math. ...
- nginx 自定义日志格式输出
修改 nginx.conf 自定义日志格式.路径 log_format my_format '$remote_addr $msec $http_host $request_uri'; 使用精准配准,对 ...
- archlinux xfce禁用Alt+F打开终端文件菜单
参照:https://superuser.com/questions/456024/how-to-disable-alt-f-shortcut-binding-from-file-menu-acces ...