Question

此滑块中的下一个按钮出现问题。

我只显示第一张图片而不显示其他两张图片。它适用于.fadeOut和.fadeIn，但在尝试滑动图片时，问题在于下一个按钮。

<script>
function prev() {
    var act=$("#slideshow img.active");
    var prev=$("#slideshow img:last");
    $(prev).prependTo("#slideshow").css("left","0px");
    $(act).animate({"left":"300px"},1000);
    $(prev).animate({"left":"0"}).show();
    $(act).removeClass("active");
    $(prev).addClass("active");
}

function next() {
    var act=$("#slideshow img.active");
    var nxt=$(act).next();
    $(act).appendTo("#slideshow").css("left","0px");
    $(act).animate({"left":"-301px"},1000);
    $(nxt).animate({"left":"0"}).show();
    $(act).removeClass("active");
    $(nxt).addClass("active");
}
</script>

这里是小提琴：http://jsfiddle.net/Mj5vz/13

Answer 1

您忘了将jQuery库包含在小提琴中，并且滑块有一个错误的选择器，您使用$("#slideshow")代替$("#slider")

window.prev = function () {
    var act = $("#slider img.active");
    var prev = $("#slider img:last");
    act.prependTo("#slider").css("left", "0px");
    act.animate({
        "left": "300px"
    }, 1000);
    prev.animate({
        "left": "0"
    }).show();
    prev.removeClass("active");
    prev.addClass("active");
}

window.next = function () {
    var act = $("#slider img.active");
    var nxt = act.next();
    act.appendTo("#slideshow").css("left", "0px");
    act.animate({
        "left": "-301px"
    }, 1000);
    nxt.animate({
        "left": "0"
    }).show();
    act.removeClass("active");
    nxt.addClass("active");
}

注意：对于act和prev变量，您再次将其包装在$中！无需将这些变量包装在$中，因为它们已经是 jQuery对象，您可以直接编写它。

尝试滑动图像时，下一个按钮无法正常工作

1 个答案:

Demo