flexslider 中的 GIF 滑块，如何仅在滑块上开始 gif-前端问题

GIF slider in flexslider, how to begin the gif only when on slider(flexslider 中的 GIF 滑块，如何仅在滑块上开始 gif)

本文介绍了flexslider 中的 GIF 滑块，如何仅在滑块上开始 gif的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

现在我有一个带有四张幻灯片的 flexslider.第三个滑块是 gif 而不是像其他滑块一样的 jpg.我遇到的问题是，这第三个 gif 滑块显然在到达页面时立即启动，而不是在您实际到达该滑块时启动.当一个人点击前两个滑块时，gif 就快完成了.

Right now I have a flexslider with four slides. The third slider is a gif rather than a jpg like the others. The issue I am having is that this third gif slider apparently starts immediately when the page is reached as opposed to when you actually get to that slider. By the time one clicks through the first two sliders, the gif is just about finished.

任何人都知道我将如何开始一个 GIF，只有当一个人达到那个滑块?

Anyone have any idea as to how I would begin a GIF only when one reaches that slider?

推荐答案

经过一小时的测试，我终于找到了解决方案，在你的声明代码中添加before函数，并更改<将下一个 img 的 code>src 清空并返回到原来的 src 做这项工作，如下所示:

I finally found the solution for you after one hour of test, add the before function to your declaration code, and change the src of next img to empty and back to the original src do the work, like bellow :

JS:

此代码将在显示之前初始化 gif.

this code will init the gif just before the display.

  $('.flexslider').flexslider({
    animation: "slide",
    before: function(slider){
      var src = $(slider).find('.flex-active-slide').next().find('img').attr('src');
      $(slider).find('.flex-active-slide').next().find('img').attr('src','').attr('src',src);
    }
  });

它非常适合我.

参见 JS Fiddle(你可以注意到 gif 中的计数器总是从 10 开始，没有 before 功能你会发现计数器已经开始)，希望有所帮助.

See JS Fiddle (you can notice that the counter in gif always start by 10, without before function you find that the counter is already start), hope that help.

这篇关于flexslider 中的 GIF 滑块，如何仅在滑块上开始 gif的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！