uniapp中当鼠标悬停在不同的li上的时候轮播图也跟着换

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

具体实现步骤如下：

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

示例代码如下：

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>