鼠标滚动滚轮切换图片

nathan娄

已于 2023-03-10 17:28:49 修改

阅读量194

点赞数

于 2023-03-10 11:58:28 首次发布

本文链接：https://blog.csdn.net/qq_41248240/article/details/129439300

版权

鼠标滚动滚轮切换图片

想起来之前在某汽车公司做的官网上的一个小功能，就是在汽车图片区域内滚动滚轮切换汽车颜色。

效果如下

在这里插入图片描述

代码如下

写的不好，请轻点喷！！！

<template>
  <div class="aboutBox">
      <div class="carContainer" @mousewheel="handleMousewheel">
        <img :src="active" alt="" />
      </div>
  </div>
</template>

<script>
// 引入防抖
import { debounce } from "@/utils/index";
export default {
  name: "about",
  components: {},
  data() {
    return {
      active: require("@/assets/color-1.jpg"),
      img1: require("@/assets/color-1.jpg"),
      img2: require("@/assets/color-2.jpg"),
      img3: require("@/assets/color-3.j