4个图像在音序器中的一个滚动中加载

问题描述 投票:1回答:1

这是插件的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));
javascript jquery html css jquery-animate
1个回答
0
投票

我想你想要的是setInterval()

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

所以代码末尾的内容如下:

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

您可以阅读更多关于setInterval() here的内容。

我希望有所帮助!

© www.soinside.com 2019 - 2024. All rights reserved.