这是我写的一个轮播图组件,用vite创建的vue项目,但是图片切换的时候切换的淡出淡入效果不出现各位能不能帮我看看什么情况,控制台也不报错
<template>
<div class="">
<div id="box">
<div class="banner">
<!--切换的图片-->
<div class="bannerImg">
<transition-group name="fade" tag="ul" >
<li v-for="(item, index) in slideList" :key="index">
<a>
<img @mouseenter="changeInterval(true)" @mouseleave="changeInterval(false)"
:src="item.image" v-show="index == currentIndex" />
</a>
</li>
</transition-group>
</div>
<!--切换的小按钮-->
<div class="bannerItems">
<span v-for="(item, index) in slideList" :class="index == currentIndex ? 'active' : ''"
@click="changeImg(index)">{{ index + 1 }}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
slideList: [
{ 'clickURL': '#', 'desc': '美食1', 'image': '/img/1.jpeg' },
{ 'clickURL': '#', 'desc': '美食2', 'image': '/img/2.webp' },
{ 'clickURL': '#', 'desc': '美食3', 'image': '/img/3.webp' },
{ 'clickURL': '#', 'desc': '美食4', 'image': '/img/4.webp' },
{ 'clickURL': '#', 'desc': '美食5', 'image': '/img/5.webp' },
{ 'clickURL': '#', 'desc': '美食6', 'image': '/img/6.webp' },
],
currentIndex: 0,
timer: null
}
},
components: {
},
methods: {
//定时器
startInterval() {
// 事件里定时器应该先清除在设置,防止多次点击直接生成多个定时器
clearInterval(this.timer);
this.timer = setInterval(() => {
this.currentIndex++;
if (this.currentIndex > this.slideList.length - 1) {
this.currentIndex = 0
}
}, 3000)
},
//园点切换图片
changeImg(index) {
this.currentIndex = index
},
//鼠标移入移出
changeInterval(val) {
if (val) {
clearInterval(this.timer)
} else {
this.startInterval()
}
},
},
mounted() {
this.startInterval()
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}
.banner {
width: 1080px;
height: 720px;
margin: 20px auto;
position: relative;
}
.bannerImg img {
width: 1080px;
height: 720px;
position: absolute;
z-index: 800;
}
.bannerItems {
position: absolute;
z-index: 1000;
bottom: 0;
width: 100%;
padding: 10px 0;
display: flex;
flex-direction: row;
justify-content: center;
}
.bannerItems span {
width: 30px;
height: 30px;
background: rgba(100, 100, 100, .6);
margin: 0 5px;
border-radius: 50%;
font-size: 16px;
font-weight: bold;
font-family: Microsoft YaHei;
line-height: 30px;
text-align: center;
color: white;
cursor: pointer;
}
.bannerItems span.active {
background-color: red;
}
/* 过渡效果样式-实现图片的淡入淡出效果 */
.fade-leave-active,
.fade-enter-active {
transition: opacity 0.5s ease;
}
.fade-leave-from,
.fade-enter-to {
opacity: 0;
}
</style>