查看3个“屏幕”后，我的滑块无法正常工作

Question

我正在尝试构建滑块，并且在前三个“屏幕”中可以正常工作，而在最后一个“屏幕”中却没有。 另外，有没有一种方法可以使滑块滑动而不只是显示？

js代码：

var oldnum = 0
var screen = 1;

$("#right_arrow").click(function () {
    screen++;
    if (screen >= 4) {
        $("#right_arrow").hide();
        screen = 4;
    } else {
        gotoright(screen);
    }
});

$("#left_arrow").click(function () {
    screen--;
    if (screen <= 1) {
        $("#left_arrow").hide();
        screen = 1;
    } else {
        gotoleft(screen);
    }
});

jwerty.key('arrow-right', function () {
    screen++;
    if (screen >= 4) {
        $("#right_arrow").hide();
        screen = 4;
    } else {
        gotoright(screen);
    }
});

jwerty.key('arrow-left', function () {
    screen--;
    if (screen <= 1) {
        $("#left_arrow").hide();
        screen = 1;
    } else {
        gotoleft(screen);
    }
});

function gotoright(num) {
    if (num <= 0 && num >= 4) {
        $("#b_" + num).show().animate({
            "opacity": 1
        }, 400, function () {});
    } else {
        oldnum = num - 1;
        $("#b_" + num).show().animate({
            "opacity": 1
        }, 400, function () {
            $("#b_" + oldnum).hide().css({
                "opacity": 0
            });
        });
    }
}

function gotoleft(num) {
    if (num <= 0 && num >= 4) {
        $("#b_" + num).show().animate({
            "opacity": 1
        }, 400, function () {});
    } else {
        oldnum = num + 1;
        $("#b_" + num).show().animate({
            "opacity": 1
        }, 400, function () {
            $("#b_" + oldnum).hide().css({
                "opacity": 0
            });
        });
    }
}

这是带有html和css的完整代码： http : //jsfiddle.net/k6xdq/1/

我希望它能像http://tobiasahlin.com/spinkit/

Answer 1

我认为您应该先检查屏幕是否为== 4，然后再对其进行++处理。

现在，您从3转到4，然后转到仅隐藏箭头的if语句。

$("#right_arrow").click(function () {
    screen++;
    if (screen >= 4) {
        $("#right_arrow").hide();
        screen = 4;
    } else {
        gotoright(screen);
    }
});

您想要的是gotoright（），如果屏幕> = 4，则hide（）。

$("#right_arrow").click(function () {
    screen++;
    if (screen >= 4) {
        $("#right_arrow").hide();
        screen = 4;
        gotoright(screen);
    } else {
        gotoright(screen);
    }
});