查看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);
    }
});