Vue淡入淡出轮播图

<template>
    <div class="news-home-main-banner-wrap">
        <div class="news-home-main-banner">
            <ul>
                <li v-for="(item,index) in BannerList" :key="index" v-show="listIndex===index">
                    <a href="">
                        <img :src="item.BannerUrl" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
   data() {
      return {
        BannerList:[
            {BannerUrl: require("../../assets/img/18.jpg")},
            {BannerUrl: require("../../assets/img/19.jpg")},
            {BannerUrl: require("../../assets/img/20.jpg")},
            {BannerUrl: require("../../assets/img/21.jpg")},
            {BannerUrl: require("../../assets/img/22.jpg")},
        ],
        listIndex:0,
        timer:null,
      }
   },
   created(){
    this.setTimer();
   },
   computed:{
   },
   methods:{
        setTimer(){
            this.timer=setInterval(()=>{
                this.listIndex++;
                if(this.listIndex==this.BannerList.length){
                    this.listIndex=0
                }
            },5000)
        }
   },
   mounted(){

   }
}
</script>
<style lang="less" scoped>
.news-home-main-banner ul{
    display: flex;
    justify-content: flex-start;
}
.news-home-main-banner ul li a img{
    height: 220px;
    width: 440px;
}
</style>

Vue淡入淡出轮播图