javascript - 4 个图像加载到定序器中的一个卷轴中

Question

这是插件的 jquery 代码。在此代码中，一个图像在一个滚动中移动，但我的问题是我必须在此排序器中的一个滚动中一一移动 4 个图像。 并添加一个图像移动到另一图像时的特定时间间隔，请帮助我解决这个问题。

插件演示:https://www.jqueryscript.net/animation/jQuery-Plugin-To-Create-Image-Sequence-Animation-On-Scroll-Sequencer.html

(function($) {

  $.fn.sequencer = function(options, cb) {

    var self = this,
        paths = [],
        load = 0,
        sectionHeight,
        windowHeight,
        currentScroll,
        percentageScroll,
        index;

    if(options.path.substr(-1) === "/") {
      options.path = options.path.substr(0, options.path.length - 1)
    }

    for (var i = 0; i <= options.count; i++) {
      paths.push(options.path + "/" + i + "." + options.ext);
    }

    $("<div class='jquery-sequencer-preload'></div>").appendTo("body").css("display", "none");

    $(paths).each(function() {
      $("<img>").attr("src", this).load(function() {
        $(this).appendTo("div.jquery-sequencer-preload");
        load++;
        if (load === paths.length) {
          cb();
        }
      });
    });

    $(window).scroll(function() {
      sectionHeight = $(self).height();
      windowHeight = $(this).height();
      currentScroll = $(this).scrollTop();
      percentageScroll = 100 * currentScroll / (sectionHeight - windowHeight);
      index = Math.round(percentageScroll / 100 * options.count);
      if(index < options.count) {
        $("img.sequencer").attr("src", paths[index]);
      }
    });

    return this;

  };

}(jQuery));

Answer 1

我认为你想要的是setInterval()。

您可以编写一个函数来更改图像，这应该非常简单，并在 setInterval() 中调用该函数作为参数。

所以在代码末尾有类似的内容:

setInterval(changeImage, 60000);
//executes the changeImage() function every 60 seconds

您可以阅读有关 setInterval() 的更多信息 here .

希望对您有所帮助!