js如何实现轮播N张连续图片实现gif动图效果？-灵析社区
刘传疯子后台接口获取 100张图片 存到一个imageList里面 在一个标签中 连续播放这100个图片实现类似gif的动画效果 用setInterval 间隔100 给img的src 重新复制？ imageList.map(item => { setTimeout(() => { this.src = item; }, 0) })
猫界袁隆平
暂停
继续
export default {
data() {
return {
currentIndex: 0,
imageList: [
'url1.jpg',
'url2.jpg',
'url3.jpg',
// ...
],
intervalId: null
};
},
computed: {
currentImage() {
return this.imageList[this.currentIndex];
}
},
methods: {
updateImage() {
this.currentIndex = (this.currentIndex + 1) % this.imageList.length;
},
startCarousel() {
if (!this.intervalId) {
this.intervalId = setInterval(this.updateImage, 100);
}
},
pauseCarousel() {
clearInterval(this.intervalId);
this.intervalId = null;
},
resumeCarousel() {
this.startCarousel();
}
},
mounted() {
this.startCarousel();
},
destroyed() {
this.pauseCarousel();
}
};
.image {
width: 100%;
height: auto;
}