vue 实现列表自动轮播,并且鼠标移入停止列表,移出继续滚动

这段代码展示了如何使用 Vue.js 创建一个无缝滚动效果。通过监听 `mouseenter` 和 `mouseleave` 事件来控制定时器,实现在鼠标悬停时停止滚动,离开时恢复。主要涉及 `scroll` 事件处理、DOM 操作以及定时器的使用,创建了两个相同内容的列表进行无缝滚动。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

直接上代码

<template>
  <div>

    <div
      id="box"
      @mouseenter="mouseenterEvent()"
      @mouseleave="mouseleaveEvent(scrollTime)"
    >
      <ul id="listbox1">
        <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      </ul>
      <ul id="listbox2">
  
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      timer: null,
      scrollTime: 20,
    };
  },
  methods: {
    scroll(t) {
      var ul1 = document.getElementById("listbox1");

      var ul2 = document.getElementById("listbox2");

      var ulbox = document.getElementById("box");

      ul2.innerHTML = ul1.innerHTML;

      ulbox.scrollTop = 0; // 开始无滚动时设为0

      this.timer = setInterval(this.rollStart, t);
    },
    // 开启滚动
    rollStart() {
      // 上面声明的DOM对象为局部对象需要再次声明
      // 无缝轮播需要两个相同内容的盒子
      var ul1 = document.getElementById("listbox1");

      // var ul2 = document.getElementById("listbox2");

      var ulbox = document.getElementById("box");

      // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0

      if (ulbox.scrollTop >= ul1.scrollHeight) {
        ulbox.scrollTop = 0;
      } else {
        ulbox.scrollTop++;
      }
    },
    // 鼠标移入关闭定时器
    mouseenterEvent() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      // // 只显示一个盒子的内容
      // document.getElementById("listbox2").style.display = "none";
    },
    // 鼠标移出重新调用定时器
    mouseleaveEvent(t) {
      console.log(1);
      if (!this.timer) {
        this.timer = setInterval(this.rollStart, t);
      }
      //  document.getElementById("listbox2").style.display = "block";
    },
  },
  mounted() {
    //开启滚动
    this.scroll(this.scrollTime);
  },
  destroyed() {
    // 页面销毁清除定时器
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
};
</script>

<style lang="less" scoped>
#box {
  width: 500px;
  height: 200px;
  border: 1px solid #000;
  //溢出隐藏
  overflow: hidden;
  &:hover {
    // 实现Y轴可滚动
    overflow-y: scroll;
  }
  &::-webkit-scrollbar {
    width: 0px;
  }
}
#listbox1 {
  width: 500px;
  height: 400px;
  border: 1px solid red;
  box-sizing: border-box;

  li {
    height: 40px;
    border: 1px solid blue;
    box-sizing: border-box;
  }
}
#listbox2 {
  width: 500px;
  height: 400px;
  border: 1px solid red;
  box-sizing: border-box;

  li {
    height: 40px;
    border: 1px solid blue;
    box-sizing: border-box;
  }
}
</style>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值