带有 div 附加内容的“下一个”和“上一个”按钮

Question

我的后伸有问题。我想要一个幻灯片，每个图像都有一个带有文本的 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);
    });

Answer 1

这在 fiddle 上不起作用，因为您忘记在 fiddle 中包含 external resurces backstretch.min.js，并且在您运行此代码的计算机中，因为您已包含该库，所以此代码正在运行。

所以包括外部资源将使您的小提琴工作。

正如您所说，上一个按钮行为不端，因此您可能需要添加资源来小提琴并再次发布！但我建议您向小提琴添加资源并检查它是否可以正常工作！