Question

我正在使用jQuery-Plugin-To-Create-Image-Sequence-Animation-On-Scroll-Sequencer。

问题是，当我将图像放在图像文件夹中以运行代码时，一切正常，但它不显示序列的最后一个图像。

我尝试更改jQuery文件，但仍无法正常工作。

这是我的index.html：

<!doctype html>
<html>
  <head>
    <style>
      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: 110%;
        width: auto;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
      }
    </style>
  </head>
  <body>
    <div id="preload">
      <h1>Presentation</h1>
    </div>
    <div id="images">
      <img class="sequencer" src="./images/0.jpg">
    </div>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery-sequencer.min.js"></script>
    <script>
      $("div#images").sequencer({
        count: 10,
        path: "./images",
        ext: "jpg"
      }, function() {
        $("div#preload").hide();
      });
    </script>
  </body>
</html>

这是我的jQuery代码：

! function(t) {
    t.fn.sequencer = function(e, n) {
        var s, r, o, h, i, u = this,
            c = [],
            a = 0;
        "/" === e.path.substr(-1) && (e.path = e.path.substr(0, e.path.length - 1));
        for (var p = 0; p <= e.count; p++) c.push(e.path + "/" + p + "." + e.ext);
        return t("<div class='jquery-sequencer-preload'></div>").appendTo("body").css("display", "none"), t(c).each(function() {
            t("<img>").attr("src", this).load(function() {
                t(this).appendTo("div.jquery-sequencer-preload"), a++, a === c.length && n()
            })
        }), t(window).scroll(function() {
            s = t(u).height(), r = t(this).height(), o = t(this).scrollTop(), h = 100 * o / (s - r), i = Math.round(h / 100 * e.count), i < e.count && t("img.sequencer").attr("src", c[i])
        }), this
    }
}(jQuery);

这里有一个演示，显示了我的问题- http://axgardi.ir/maimage/。

如您所见，它显示“深度50”至“深度59”，而未显示“深度60”。

图像定序器不显示序列的最后一个图像

0 个答案: