js如何实现轮播N张连续图片实现gif动图效果?

作者站长头像
站长
· 阅读数 6

后台接口获取 100张图片 存到一个imageList里面在一个<img>标签中 连续播放这100个图片实现类似gif的动画效果

用setInterval 间隔100 给img的src 重新复制?


    imageList.map(item => {
      setTimeout(() => {
        this.src = item;
      }, 0)
    })
回复
1个回答
avatar
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>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容