  <div class="carousel" @mouseenter="enter" @mouseleave="leave">    
     <transition-group
            tag="ul"
            name="image"
            enter-active-class="animated lightSpeedIn"
            leave-active-class="animated lightSpeedOut"
    >
        <li v-for='(image,index) in img' :key='index' v-show="index === mark">
            <a href="javascript:;">
                <img :src="image" class="bannertu">
            </a>
        </li>
    </transition-group>
    <div class="bullet banerdian">
        <span v-for="(item,index) in img.length" :class="{'active':index === mark}"
         @click="change(index)" :key="index"></span>
    </div>
    <div class="switch">
        <span class="prev" @click="prev">&lt;</span>
        <span class="next" @click="next">&gt;</span>
    </div>
</div>
  <script>
    var vm = new Vue({
        el:'.carousel',
        data:{
            mark:0,
             img:[ 
    <stl:Contents channelIndex="banner">
                    '{content.imageUrl}',         
        </stl:Contents>
            ],
            time:null
        },
        methods:{   //添加方法
            change(i){
                this.mark = i;
            },
            prev(){
                this.mark--;
                if(this.mark === -1){
                    this.mark = 3;
                    return
                }
            },
            next(){
                this.mark++;
                if(this.mark === 4){
                    this.mark = 0;
                    return
                }
            },
            autoPlay(){
                this.mark++;
                if(this.mark === 4){
                    this.mark = 0;
                    return
                }
            },
            play(){
                this.time = setInterval(this.autoPlay,3000);
            },
            enter(){
                console.log('enter')
                clearInterval(this.time);
            },
            leave(){
                console.log('leave')
                this.play();
            }
        },
        created(){
            this.play()
        }
    })
</script>