uniapp 实现鼠标悬停 li 元素切换轮播图

可以通过监听鼠标的 hover 事件，在事件回调函数中修改轮播图的显示内容。以下是一个示例代码：

<template>
  <div class="carousel-wrapper" @mouseover="handleMouseOver" @mouseout="handleMouseOut">
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <div v-if="showImage">
      <img src="https://example.com/image.jpg">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showImage: false,
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
    }
  },
  methods: {
    handleMouseOver() {
      this.showImage = true;
    },
    handleMouseOut() {
      this.showImage = false;
    }
  }
}
</script>

<style>
.carousel-wrapper {
  position: relative;
}
.carousel-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

在上面的示例中，当鼠标悬停在 li 元素上时，会显示一个固定的图片，可以根据需求修改为轮播图。需要注意的是，为了让图片或轮播图显示在 li 元素上方，需要设置图片或轮播图的 position 为 absolute，并且设置 z-index 值较大。