五种创建轮播图的方式详解：原生、Vue2、Vue3、React类组件与函数组件实践 - 以Vue3为例

在Vue3中实现轮播图可以使用<transition>组件和ref来实现。

1. 在组件中引入所需的图片和样式：

<template>
  <div class="carousel">
    <transition name="slide">
      <img :src="currentImage" :key="currentImage" class="image" />
    </transition>
    <button @click="prevImage" class="prev">上一张</button>
    <button @click="nextImage" class="next">下一张</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const images = [
      'image1.jpg',
      'image2.jpg',
      'image3.jpg',
      'image4.jpg'
    ];

    const currentIndex = ref(0);

    const prevImage = () => {
      currentIndex.value = (currentIndex.value - 1 + images.length) % images.length;
    };

    const nextImage = () => {
      currentIndex.value = (currentIndex.value + 1) % images.length;
    };

    const currentImage = computed(() => {
      return images[currentIndex.value];
    });

    return {
      currentImage,
      prevImage,
      nextImage
    };
  }
};
</script>

<style>
.carousel {
  position: relative;
}

.image {
  width: 100%;
  height: auto;
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}

.slide-enter,
.slide-leave-to {
  transform: translateX(100%);
}

.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}
</style>

使用ref创建了一个currentIndex变量来追踪当前显示的图片索引。然后，在prevImage和nextImage方法中更新currentIndex来切换图片。最后，使用<transition>组件来给图片添加过渡效果，并使用computed属性来获取当前显示的图片路径。