jquery - 带有下一个/上一个按钮的 Jquery 图像库无法正常工作

Question

我正在尝试创建一个图片幻灯片库。它不需要自动运行。我只希望它有一个上一个和下一个按钮，以便用户可以手动导航。

我的问题是我的代码不起作用。NEXT 按钮，当我再次尝试单击它时，它只会跳转到第二张图像，而不会跳转到剩余的图像。单击“上一个”按钮时，应显示最后一张图像或上一张图像，但事实并非如此。

请帮帮我。在这里查看我的代码

Answer 1

您的问题是，在将上一个课程添加到当前项目之前，您没有删除它。因此，一旦您点击下一个，您就有 2 个以前的项目，它会找到第一个。

$('.next').click(function(event){
    event.preventDefault();

    $('.previous').removeClass('previous');

    $('.current').removeClass('current').addClass('previous');
    $('.previous').hide("slide",{direction: 'left'}, 500);

    var previousId = parseInt($('.previous').attr('id'));

    $('#'+(previousId+1)).show("slide", {direction: 'right'}, 500).addClass('current');

});

$('.prev').click(function(event){
    event.preventDefault();

            $('.previous').removeClass('previous');

    $('.current').removeClass('current').addClass('previous');
    $('.previous').hide("slide",{direction: 'right'}, 500);

    var previousId = parseInt($('.previous').attr('id'));
    var Id = parseInt($('.current').attr('id'));


    $('#'+(previousId-1)).show("slide", {direction: 'left'}, 500).addClass('current');

一旦你解决了这个问题，你就需要处理你打到最后一张图片的情况。你想留在那个形象上，还是绕着圈子？