答辩vue实现轮播图
Vue实现轮播图的方法
使用第三方库（如Swiper）
安装Swiper库：
npm install swiper vue-awesome-swiper引入Swiper组件：
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';在模板中使用：
<swiper :autoplay="{ delay: 3000 }" :loop="true">
<swiper-slide v-for="(item, index) in slides" :key="index">
<img :src="item.image" />
</swiper-slide>
</swiper>自定义轮播图组件
定义轮播图数据：
data() {
return {
slides: [
{ image: 'image1.jpg' },
{ image: 'image2.jpg' },
{ image: 'image3.jpg' }
],
currentIndex: 0
}
}实现自动轮播逻辑：
mounted() {
this.autoPlay();
},
methods: {
autoPlay() {
setInterval(() => {
this.currentIndex = (this.currentIndex + 1) % this.slides.length;
}, 3000);
}
}模板部分：
<div class="carousel">
<img :src="slides[currentIndex].image" />
<button @click="currentIndex = (currentIndex - 1 + slides.length) % slides.length">Prev</button>
<button @click="currentIndex = (currentIndex + 1) % slides.length">Next</button>
</div>添加过渡效果
使用Vue的transition组件：
<transition name="fade">
<img :key="currentIndex" :src="slides[currentIndex].image" />
</transition>CSS过渡样式：
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}响应式处理
监听窗口大小变化：
data() {
return {
windowWidth: window.innerWidth
}
},
mounted() {
window.addEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
this.windowWidth = window.innerWidth;
}
}根据屏幕宽度调整轮播图样式：
<img :src="slides[currentIndex].image" :style="{ width: windowWidth < 768 ? '100%' : '50%' }" />
