<div class="banner" style="height:180px">
<transition-group name="imgs" tag="p">
<img v-for="item, index in bannerImgs" class='list-item' :key="index" :src="item" width='100%' height='180px' v-show="index===bannerIndex" />
</transition-group>
</div>
css样式
.banner{
position: relative;
}
.list-item{
width: 100%;
position: absolute;
}
.imgs-enter-active ,.imgs-leave-active {
transition: all 1s ease;
}
.imgs-enter {
transform: translateX(100%);
}
.imgs-enter-to {
transform: translateX(0);
}
.imgs-leave {
transform: translateX(0);
}
.imgs-leave-to {
transform: translateX(-100%);
}
js代码
mounted() {
this.startTimer()
},
methods: {
startTimer: function(){
this.timer = setInterval(this.autoPlay, 5000);//用定时器控制每张图的显示时间
},
autoPlay(){
this.bannerIndex = this.bannerImgs.length === (this.bannerIndex+1) ? 0 : (this.bannerIndex+1)
}
}
