Question

我正在尝试构建滑块，并且在前3个“屏幕”中它起作用，而在最后一个中则不然。另外，有没有办法让滑块滑动而不仅仅是为了显示？

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（），如果屏幕是＆gt; = 4，则隐藏（）它。

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

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

1 个答案: