0

バックストレッチで悩んでいます。各画像のテキストを含む div を持つスライドショーが必要です。

私はそれを機能させましたが、「次へ」ボタンと「前へ」ボタンを追加しようとすると、「次へ」ボタンのみが機能し、「前へ」ボタンが誤動作し、エラーが表示されません。

私のコードを確認するには、このフィドルを参照してください: Fiddle

フィドルを機能させることができませんでしたが、私のコンピューターでは問題なく動作します。編集：フィドルが機能しています！

        // Backstretch
    $("#slide").backstretch([
        "http://www.picturesnew.com/media/images/images-background.jpg",
        "http://static3.businessinsider.com/image/52a0bbfd6bb3f7961363819e/the-most-amazing-satellite-images-of-the-year.jpg",
        "http://www.afranko.org/wp-content/uploads/2013/10/13ead58cc4daab6e794c1e895004e4e4.jpg",
        "http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg"], {
        fade: 750,
        duration: 4000
    });

    // Backstretch text overlay
    var obj = $(".overlay");
    var arr = $.makeArray(obj);
    var y = arr.length;
    var x = 0;
    var u = 0;

    $(".overlay").hide().eq(x).show();
    $("#c2").text(y);
    $("#c3").text(u);

    $(window).on("backstretch.before", function (e, instance, index) {
        // If previous, then skip x + 1
        if (u === 0) {
            x = x + 1;

            // If x is larger than y, start from 0
            if (x >= y) {
                x = 0;
            }
        } else {
            u = 0;
        }

        $(".overlay").fadeOut(500);

        $("#c1").text(x);
        $("#c3").text(u);
    });


    $(window).on("backstretch.show", function (e, instance) {
        $(".overlay").eq(x).fadeIn(750);
    });

    // Backstretch controls
    $("#next").click(function (z) {
        //            z.preventDefault();
        $("#slide").data("backstretch").next();

        $("#c1").text(x);
    });

    $("#prev").click(function (z) {
        //            z.preventDefault();
        $(".overlay").fadeOut(500);
        $("#slide").data("backstretch").prev();

        u = 1;

        if (x === 0) {
            x = y - 2;
        } else {
            x = x - 1;
        }

        $(".overlay").eq(x).fadeIn(750);

        $("#c1").text(x);
        $("#c3").text(u);
    });
4

1 に答える 1

0

フィドルに外部リソース を含めるのを忘れたため、これはbackstretch.min.jsフィドルでは機能しません。また、このコードを実行しているコンピューターでは、そのライブラリが含まれているため機能しています。

したがって、外部リソースを含めると、フィドルが機能します。

前のボタンの動作がおかしいと言ったように、そのためにリソースをフィドルに追加して再度投稿する必要があるかもしれません! ただし、フィドルにリソースを追加して、動作することを確認することをお勧めします!

于 2014-05-26T09:05:25.467 に答える