vue3实现左右自动轮播

### Vue3 实现左右自动轮播效果 在 Vue3 中实现左右自动轮播效果可以通过创建一个自定义组件来完成。该组件能够控制是否自动轮播，并且可以在鼠标悬停时暂停轮播，点击左右按钮或分页指示器也可以切换图片。 #### 组件结构设计 首先定义组件的基础结构，在 `Carousel.vue` 文件中编写如下代码： ```html <template> <div class="carousel"> <!-- 左箭头 --> <button @click="prevSlide" :class="{ hidden: !showArrows }">&lt;</button> <!-- 图片展示区 --> <transition-group tag="ul" name="slide-transition"> <li v-for="(image, index) in images" :key="index" v-show="index === currentIndex"> <img :src="image.src" alt="滑动图片"/> </li> </transition-group> <!-- 右箭头 --> <button @click="nextSlide" :class="{ hidden: !showArrows }">&gt;</button> <!-- 分页指示器 --> <div class="pagination"> <span v-for="(item, i) in images" :key="i" :class="{ active: i === currentIndex }" @mouseover="currentIndex = i"></span> </div> </div> </template> ``` #### JavaScript逻辑处理 接着配置脚本部分，管理状态变化以及定时任务： ```javascript <script setup> import { ref, onMounted, onUnmounted } from 'vue'; const props = defineProps({ showArrows: { type: Boolean, default: true }, autoPlay: { type: Boolean, default: false } }); let intervalId; const images = [ { src: '/path/to/image1.jpg' }, { src: '/path/to/image2.jpg' }, { src: '/path/to/image3.jpg' } ]; const currentIndex = ref(0); // 定义方法用于改变当前显示索引 function setIndex(index) { clearInterval(intervalId); currentIndex.value = index; if (props.autoPlay && props.showArrows !== undefined) startAutoPlay(); } // 上一张/下一张幻灯片函数 function prevSlide() { setIndex((currentIndex.value + images.length - 1) % images.length); } function nextSlide() { setIndex((currentIndex.value + 1) % images.length); } // 开始自动播放 function startAutoPlay() { stopAutoPlay(); intervalId = setInterval(() => nextSlide(), 3000); } // 停止自动播放 function stopAutoPlay() { clearInterval(intervalId); } onMounted(() => { if (props.autoPlay) startAutoPlay(); }); onUnmounted(() => { stopAutoPlay(); }); </script> ``` 此段代码实现了基本的轮播图功能，包括自动轮播、手动切换等功能[^1]。 #### 样式美化 最后添加一些简单的样式使轮播更加美观： ```css <style scoped> .carousel { position: relative; } .hidden { display: none; } .pagination span { margin-right: 8px; cursor: pointer; } .active { background-color: red; } .slide-transition-enter-active, .slide-transition-leave-active { transition: all .5s ease-out; } .slide-transition-enter-from, .slide-transition-leave-to { opacity: 0; transform: translateX(-10%); } </style> ``` 这样就完成了基于Vue3框架下的简单轮播图插件开发。