uniapp 轮播图鼠标悬停切换 - 实现步骤及代码示例

可以通过监听鼠标悬停事件，并根据悬停的 li 元素的位置来切换轮播图。

具体实现步骤如下：

1. 在页面中添加一个包含轮播图和 li 元素的容器，用于监听鼠标悬停事件。
2. 给 li 元素添加一个自定义属性，用于记录对应的轮播图的索引值。
3. 监听容器的鼠标悬停事件，获取鼠标悬停的 li 元素的索引值。
4. 根据索引值切换对应的轮播图。

示例代码如下：

HTML 部分：

<template>
  <div class='container' @mouseover='handleMouseover'>
    <ul>
      <li v-for='(item, index) in list' :key='index' :data-index='index'>{{ item }}</li>
    </ul>
    <div class='carousel-container'>
      <img v-for='(item, index) in carouselList' :key='index' :src='item.src' :class='{ active: currentIndex === index }'>
    </div>
  </div>
</template>

JS 部分：

<script>
  export default {
    data() {
      return {
        list: ['选项1', '选项2', '选项3'],
        carouselList: [
          { src: '1.jpg' },
          { src: '2.jpg' },
          { src: '3.jpg' }
        ],
        currentIndex: 0
      }
    },
    methods: {
      handleMouseover(e) {
        const index = e.target.dataset.index
        if (index !== undefined) {
          this.currentIndex = parseInt(index)
        }
      }
    }
  }
</script>

CSS 部分：

<style>
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
  }
  ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  li {
    margin-right: 20px;
    cursor: pointer;
  }
  .carousel-container {
    position: relative;
    width: 600px;
    height: 400px;
  }
  .carousel-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .5s;
  }
  .carousel-container img.active {
    opacity: 1;
  }
</style>