用vue3做一个轮播图，功能包括自动轮播，手动轮播

### Vue3 实现自动轮播和手动轮播功能的轮播图组件 #### 组件结构概述 为了创建一个既支持自动轮播又支持手动切换的轮播图组件，可以将整个项目拆分为多个子组件来提高可维护性和复用性。主要涉及以下几个部分： - `Index.vue`: 主要负责渲染轮播项列表以及控制逻辑。 - `Item.vue`: 单张图片展示单元。 - `Dot.vue`: 底部指示器圆点。 - `Director.vue`: 控制按钮（上一张/下一张）。 #### 关键技术要点 通过组合式 API 来管理状态，在`setup()`函数内部定义响应式的属性用于存储当前显示索引、定时器对象等必要变量[^1]。 ```javascript import { ref, onMounted, onUnmounted } from 'vue'; export default { setup() { const currentIndex = ref(0); let timerId; function startAutoPlay(intervalTime) { clearInterval(timerId); // 清除旧计时器 timerId = setInterval(() => { nextSlide(); }, intervalTime); } function stopAutoPlay() { clearInterval(timerId); } return { currentIndex, startAutoPlay, stopAutoPlay }; }, }; ``` 此段代码展示了如何利用Vue Composition API中的生命周期钩子方法`onMounted`与`onUnmounted`配合`setInterval`实现自动化播放效果的同时也提供了停止的方法以便于处理鼠标悬停暂停等功能需求。 #### 完整示例代码 ##### Index.vue (父级容器) ```html <template> <div class="carousel"> <!-- 轮播内容 --> <transition-group name="fade" tag="ul" class="slides"> <li v-for="(slide, index) in slides" :key="index" v-show="currentIndex === index"> <img :src="slide.imageSrc"/> </li> </transition-group> <!-- 左右箭头控制器 --> <button @click="prev">❮</button> <button @click="next">❯</button> <!-- 圆点导航 --> <ul class="dots"> <li v-for="(dot, idx) in dots" :class="{ active: currentIndex === idx }" @click="goto(idx)"> ● </li> </ul> </div> </template> <script lang="ts"> // ...省略前面相同的部分... const props = defineProps({ slides: Array, // 图片数组 }); function prev() { goto(currentIndex.value - 1); } function next() { goto((currentIndex.value + 1) % props.slides.length); } function goto(index) { if (index >= props.slides.length) { currentIndex.value = 0; } else if (index < 0) { currentIndex.value = props.slides.length - 1; } else { currentIndex.value = index; } } </script> <style scoped> /* 添加样式 */ .carousel { position: relative; width: 80%; margin: auto; overflow: hidden; } .fade-enter-active, .fade-leave-active { transition: opacity .5s ease-in-out; } .fade-enter-from, .fade-leave-to { opacity: 0; } .dots li.active { background-color: red !important; /* 当前选中高亮 */ } </style> ``` 上述模板实现了基本的功能框架，包括但不限于：图片循环滚动、点击左右两侧按钮切换到上下一张幻灯片、底部的小圆圈作为页面指示器，并且当用户点击某个特定位置的时候能够跳转至对应页码的内容。