需求: 页面加载图片进行切换,类似于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:如有什么问题欢迎留言,如果感觉本文章还不错,还请留下你的"大拇指"!!!