js如何实现轮播N张连续图片实现gif动图效果?
后台接口获取 100张图片 存到一个imageList里面在一个<img>标签中 连续播放这100个图片实现类似gif的动画效果
用setInterval 间隔100 给img的src 重新复制?
imageList.map(item => {
setTimeout(() => {
this.src = item;
}, 0)
})
回复
1个回答
test
2024-06-24
<template>
<view>
<image :src="currentImage" class="image" />
<button @click="pauseCarousel">暂停</button>
<button @click="resumeCarousel">继续</button>
</view>
</template>
<script>
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();
}
};
</script>
<style>
.image {
width: 100%;
height: auto;
}
</style>
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容