javascript - 简单的 jQuery 单击 slider

Question

我在让简单的 jQuery 图像 slider 向后移动时遇到问题。 我的前进按钮工作正常。

$("#slideshow > div:gt(-1)").hide();
$(".Leftarrow").click(function(){
    $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
});

这是后退按钮，这似乎是跳过一两张幻灯片而不是后退。

我尝试了几种方法让它发挥作用，但到目前为止还没有任何效果。我使用 .prev() 代替 .next() 但这不起作用，我也尝试更改 div:gt(0) 中的数字，但这也不起作用。我认为向后走和向前走一样简单。

任何帮助都会很有用，

谢谢

Answer 1

我根据您的代码编写了一些 slider 原型(prototype)。看起来很简单。

$("#slideshow > div:last").show();

$(".left").click(function(){
    $('.active')
        .fadeOut(500)
        .removeClass('active')
        .prev()
        .addClass('active')
        .fadeIn(500);
});
$(".right").click(function(){
    $('.active')
        .fadeOut(500)
        .removeClass('active')
        .next()
        .addClass('active')
        .fadeIn(500);
});

剩下的你可以通过这个链接看到: https://jsfiddle.net/tasmanangel/a72mLuh5/