当图像动画出现在我的滑块中时，如何从头开始播放图像动画？

Question

我使用 swiper.js 制作了一个滑块，我希望 gif 在我们转到该幻灯片时从头开始动画。我尝试使用 ajax load 但 gif 没有重新加载！

swiper.on('slideChange', function() {
  $('#ts .gif').load(document.URL + '#ts .gif');
});

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide d-flex" id="da">
      hello
    </div>
    <div class="swiper-slide" id="ts">
      <div>
        <h3><strong>Digital Agency Support</strong></h3>
      </div>
      <div class="gif">
        <img src="dm.gif" alt="">
      </div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

Answer 1

遗憾的是，据我所知，没有办法与 gif 进行交互。实现您想要的效果的一种方法是用静态图像替换 gif，只要它不在焦点内即可。类似于：

swiper.on('slideChange', function() {
  if (swiper.activeIndex == 1 ) {
        document.getElementById("gif").src = "gif.gif";
    }else{
        document.getElementById("gif").src = "image.png";
    }
});

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide d-flex" id="da">
      hello
    </div>
    <div class="swiper-slide" id="ts">
      <div>
        <h3><strong>Digital Agency Support</strong></h3>
      </div>
      <div class="gif">
        <img id="gif" src="image.gif" alt="">
      </div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

当图像动画出现在我的滑块中时，如何从头开始播放图像动画？

How can I start an image animation from the beginning when it appears in my slider?

javascript

html

ajax

gif

swiper