vue图片循环切换动画

需求： 页面加载图片进行切换，类似于gif效果

 <div class="wallpaper-img">
      <div>
        <img :src="img" alt="">
      </div>
      export default {
    
    
	  data() {
    
    
	    return {
    
    
	      imgList: [
	        {
    
    
	          icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595915839590&di=663e746bdf4f7d67b5e280f308a92399&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F8b82b9014a90f6030add233a3b12b31bb051ed5a.jpg'
	        },
	        {
    
    
	          icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595915839591&di=ca84280fe6b389b0e55654ef7fc58bae&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F54fbb2fb43166d22d552b941432309f79052d23a.jpg'
	        },
	        {
    
    
	          icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595915839588&di=ce68e8add549af5d464cfa5199cd48a8&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201109%2F16%2F193522det2e1sxw1kv2txu.jpg'
	        }
	      ], // 图片数组
	      img: '', // 图片路径
	      id: 0 // 默认id 从零开始
	
	    }
	  },
	  created() {
    
    
	    this.gif()
	  },
  methods: {
    
    
    gif() {
    
    
    // 页面显示 加载默认图片
      this.img = this.imgList[this.id].icon
      // 设置一个定时器，达到动画切换效果
      setInterval(() => {
    
    
       // 如果当前图片是最后一张就把id清零 从第一张开始
        if (this.id === this.imgList.length - 1) {
    
    
          this.id = 0
          this.img = this.imgList[this.id].icon
        } else {
    
    
        // 如果当前不是最后一张 就切换下一张
          this.id += 1
          this.img = this.imgList[this.id].icon
        }
      }, 1000)
    }
  }
}

总结：
功能实现主要在于，创建一个id值与索引对应。

PS:如有什么问题欢迎留言，如果感觉本文章还不错，还请留下你的"大拇指"！！！