vue中利用v-show写的轮播

//template中内容

<div  class="carousel">
    <!--轮播图片-->
    <div class="carouselImgs">
        <ul>
            <li  @mouseover="over"  @mouseleave="out" v-for="(item,index) of list" :key="index">
               <transition name="fade">
                    <img v-show="index==activeIndex" :src="'http://127.0.0.1:3000/'+`${item.imgUrl}`" transition="fade">
                </transition>
                <!-- <img v-show="index==activeIndex" :src="'http://127.0.0.1:3000/'+`${item.imgUrl}`" >-->
            </li>
        </ul>
    </div>
    
     <!--轮播小圆按钮-->
     <div class="smallCircle">
        <ul>
            <li @mouseover="over" @mouseleave="out" @mouseenter="moveTo(index)" :class="{'active':activeIndex==index}" v-for="(item,index) of list" :key="index">
            </li>
        </ul>
     </div>

    <!--轮播左右指示箭头-->
    <div  @mouseover="over" @mouseleave="out" class="button-prev" @click="moveTo(-1)">
        <img src="../../assets/icon/prev.png" >
    </div>
    <div  @mouseover="over" @mouseleave="out" @click="moveTo(-2)" class="button-next">
        <img src="../../assets/icon/next.png" >
    </div>
</div>

script中的内容

<script>
	export default {
    data(){
        return {
            list:[],
            activeIndex:1,//轮播图激活时的下标
            listShow:""//左侧导航 要显示的菜单栏 
        }
    },
    created() {
        this.init();
    },
    methods: {
        //页面加载时调用的函数
        init(){
            this.getCarousel();
            this.out();
        },
        // 获取轮播图的数据
        getCarousel(){
            // 获取轮播图的数据imgUrl，id
            this.axios.get("product/carousel")
            .then(result=>{
                //console.log(result.data)
                this.list=result.data;
            })  
        },
        // 鼠标移入小圆点显示对应图片
        moveTo(to){
            if(to==-1){//等于-1时是向左--   
                if(this.activeIndex>0){
                    this.activeIndex=this.activeIndex-1
                }else{
                    this.activeIndex=this.list.length-1;
                }
            }else if(to==-2){//等于-2时是向右++
                if(this.activeIndex>=this.list.length-1){
                     this.activeIndex=0;
                }else{
                    this.activeIndex=this.activeIndex+1;
                    }
            }else{
                this.activeIndex=to;// 鼠标移入小圆点显示对应图片
            }
            //console.log(this.activeIndex)
        },
        timer:null,   //先定义一个全局timer
        //鼠标离开时自动播放
        out(){
            if(this.timer){
                window.clearInterval(this.timer);
                this.timer=null;
            }
            this.timer=window.setInterval(()=>{    //要改成箭头函数，this指向才正确
                var i=this.activeIndex;
                if(i<this.list.length-1){
                    this.moveTo(i+1)
                }else{
                    this.moveTo(0)
                }
               //console.log(i)
            },4000)
        },
        //鼠标移入时停止循环,上边定义一个timer为null
        over(e){
            e.stopPropagation();
            window.clearInterval(this.timer);
            this.timer=null;
            //console.log(5555)
        },
}
</script>

//style样式

a:hover{
    color:red !important;
}
.carousel{
    position:relative;
    z-index:1;
    height:550px;
    width:1200px;
    margin:0 auto;
    /*border:1px solid red;*/
    z-index:5;
}
.carousel>div{
    position: absolute;
}
.smallCircle ul{
    display:flex;
}
/*轮播图片carouselImgs */
.carouselImgs{
    left:-360px;
}
.carouselImgs a{
    display: block;
}
.carouselImgs img{
    height:550px;
    /*width:1920px;*/
    border-radius:0px 0px 1200px 1200px/0px 0px 150px 150px;
}
.carouselImgs>ul{
    height:550px;
    overflow:hidden;
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.fade-enter-active{
    transition:opacity 2s
}
.fade-leave-active{
    transition:opacity 0.1s
}
.fade-enter, .fade-leave-active{
    opacity:0.2;
}
/*-轮播小圆按钮*/
.smallCircle{
    right:0px;
    top:455px;
}
.smallCircle li{
    width:15px;
    height:15px;
    border-radius:50%;
    border:1px solid #fff;
    margin-left:12px;
    z-index:2;
}
/*轮播左右指示箭头*/
.button-prev,.button-next{
    width:60px;
    height:60px;
    border-radius:50%;
    line-height:60px;
    text-align:center;
    background-color:rgba(200,200,200,0.1);
     z-index:3;
     top:240px;
}
.button-prev{
    left:200px;
}
.button-next{
    right:0px;
}
.button-prev img,.button-next img{
    width:40px;
}
.button-prev:hover,.button-next:hover{
    background-color:rgba(99,99,99,0.5);
}
/* 小圆点激活时样式 */
.active{
    background-color:#fff;
}