前端页面数组中对象动态切换,鼠标悬停,离开恢复自动切换

news/2025/1/13 7:32:26/

鼠标事件:关键词@mouseenter="startScroll" @mouseleave="stopScroll"   “screenshotList”

 <div class="video-screenshot" @mouseenter="startScroll" @mouseleave="stopScroll"><div class="screenshot-title"><span>实时告警截图</span> </div><div class="screenshot-bottom" v-for="(item, index) in screenshotList" :key="index"v-show="index === currentIndex"><div class="video-img"><img :src="item.imgList" alt=""></div><div class="text"><div>告警名称:{{ item.name }}</div><div>报警时间:{{ item.time }}</div><div>报警地点:{{ item.adress }}</div></div></div><!-- 提示文字区域 --><!-- <el-alert v-if="isLastImg" title="最后一条了哦" type="warning" center></el-alert> --><div class="button"><button @click="prevContent">上一条</button><button @click="nextContent">下一条</button></div></div>data(){
return {timer: null,screenshotList:}}
    mounted() {this.autoPlay();   // 初始化时截图动态展示},// 鼠标移入停止滚动startScroll() {clearInterval(this.timer);},// 鼠标移出继续止滚动stopScroll() {this.autoPlay();},// 截图滚动播放方法autoPlay() {this.timer = setInterval(() => {for (let i = 0; i < this.screenshotList.length; i++) {const currentIndex = i;this.screenshotList.push(this.screenshotList.splice(currentIndex, 1)[0]);if (this.index > this.screenshotList.length - 1) {this.index = 0;}}}, 3000); // 每隔2秒播放下一个元素}


http://www.ppmy.cn/news/87861.html

相关文章

Linux防火墙限制访问服务器IP和端口

Linux防火墙限制访问服务器IP和端口 笔记 逐行执行命令 firewall-cmd --state systemctl start firewalld systemctl enable firewalld firewall-cmd --get-default-zonefirewall-cmd --set-default-zonetrustedfirewall-cmd --permanent --new-zoness firewall-cmd --perma…

2023系统分析师---简答题常考概念

实体类、控制类、边界类: 实体类:实体类映射需求中的每个实体,保存需要存储在永久存储体中的信息,例如:用户、商品等; 控制类:控制类是用于控制用例工作的类,用于对一个或者几个用例所特有的控制行为进行建模。例如:结算、备货等; 边界类:边界类用于封装在用例内…

天津和平区大数据培训班哪家好?大数据适合什么人学?

当前正处于企业数据化转型的大环境&#xff0c;大数据这一行业受到越来越多人的关注&#xff0c;不少人想要借着这个势头加入大数据这一行业&#xff0c;今天小编就来给大家分析一下大数据行业&#xff0c;往下看吧。 大数据行业前景如何 大数据行业的就业前景不得不说非常好…

主机访问不到虚拟机(centos7)web服务的解决办法

目录 一、背景 二、解决办法 2.1、配置虚拟机防火墙 2.2、修改虚拟机网络编辑器 一、背景 主机可以访问外网&#xff0c;虚拟机使用命令&#xff1a;curl http://网址&#xff0c;可以访问到web服务 &#xff0c;主机使用http://网址&#xff0c;访问不到虚拟机&#xff08…

Java的内存模型(Java Memory Mode,JMM)

并发编程模型的两个关键问题 线程之间如何通信及线程之间如何同步。 线程之间如何通信&#xff1a;共享内存&#xff0c;消息传递线程之间如何同步通信是指线程之间以何种机制来 交换信息同步是指程序中用于控制不同线程间 操作发生相对顺序 的机制在共享内存的并发模型里&a…

webshell提权

首先我们要清楚为什么要提权 相关操作被拒绝。无法继续进行渗透。就需要提权 我们通过各种web漏洞&#xff0c;中间件漏洞&#xff0c;或者cms等漏洞拿到权限后。得到的权限一般是后台权限&#xff0c;有些是webshell权限。如果是后台权限&#xff0c;我们就要通过后台上传后…

在外出差,如何远程登录公司内网金蝶云ERP管理系统【cpolar内网穿透】

文章目录 前言1.金蝶安装简介2. 安装cpolar内网穿透3. 创建安全隧道映射4. 在外远程访问金蝶云星空管理中心5. 固定访问地址6. 配置固定公网访问地址7.创建数据中心简介8.远程访问数据中心9. 固定远程访问数据中心地址10. 配置固定公网访问地址 转发自CSDN风浪越大%鱼越贵的文章…

ThingsBoard教程(五十):规则节点解析 创建关系节点Create Relation Node,删除关系节点 Delete Relation Node

创建关系节点 Create Relation Node Since TB Version 2.2.1 根据类型和方向,从所选实体创建到消息发起方的关系。 以下消息发起方类型被允许:资产、设备、实体视图、客户、租、仪表板。 通过元数据键模式查找目标实体,然后在源实体和目标实体之间创建关系。 如果选择的…