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

最新推荐文章于 2024-09-11 22:31:16 发布

xiaoming_0208

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量122

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/xiaoming4965/article/details/130882762

版权

该代码段展示了使用Vue.js实现的一个功能，当鼠标进入<div>元素时停止实时告警截图的滚动播放，离开时恢复播放。滚动播放通过`autoPlay`函数每3秒更新`screenshotList`来实现，同时提供上一条和下一条按钮控制。告警信息包括告警名称、时间和地点。

摘要由CSDN通过智能技术生成

鼠标事件：关键词@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秒播放下一个元素
        }