vue实现图片的轮播

   <div class="item">
         <span class="btn left" @click="prevIndex">&lt;</span>
             <div v-for="(imgUrl, index) in bannerList" v-show="index===mark" :key="index" class="slideshow">
                  <a href="#">
                     <img :src=imgUrl>
                  </a>
             </div>
        <span class="btn right" @click="nextIndex">&gt;</span>
    </div>

  data () {
      return {
        mark: 0, //比对图片索引的变量  
        bannerList:[
          require('../assets/1.jpg'),
          require('../assets/2.jpg'),
          require('../assets/3.jpg'),
        ] ,
      }
  },

// 轮播
  methods:{
    prevIndex(){
      this.mark = this.mark - 1;
      if(this.mark < 0){
        this.mark = 2;
      }
      console.log(this.mark);
    },
    nextIndex(){
      this.mark = this.mark + 1;
      if(this.mark == 3){
        this.mark = 0;
      }
      console.log(this.mark);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    autoPlay () {  
      this.mark++;  
      if (this.mark === 3) { //当遍历到最后一张图片置零  
        this.mark = 0  
      }  
    },  
    play () {  
      setInterval(this.autoPlay, 4000)  
    },  
    change (i) {  
      this.mark = i  
    }  
  },
  created () {  
    this.play()  
  },
  // 轮播