手动顺序并自动播放顺序

Question

下面是我的代码，在这个代码中，图像在滚动时逐个变化，但是我希望前一个10个图像的变化一个接一个地滚动，而不是在图像序列自动播放之后。 当我在那个时候向上滚动时，顺序播放反向播放到10号图像，然后在滚动后逐个改变图像。

(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));

$("div#images").sequencer({
        count: 128,
        path: "https://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-Image-Sequence-Animation-On-Scroll-Sequencer/images",
        ext: "jpg"
      }, function() {
        $("div#preload").hide();
      });

body{
        margin: 0;
        padding: 0;
      }
      div#preload{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        padding-top: 25%;
        background: #f2f2f3;
        z-index: 1
      }
      div#preload h1, div#preload h2{
        text-align: center;
      }
      div#images{
        height: 5000px;
        z-index: 0;
      }
      img{
        min-height: 100%;
        width: auto;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div id="images">
      <img class="sequencer" src="https://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-Image-Sequence-Animation-On-Scroll-Sequencer/images/0.jpg">
    </div>

..........................................