带有下一个/上一个按钮的jQuery图片库无法正常工作 [英] Jquery Image gallery with Next/Previous buttons doesn't work correctly

问题描述

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

I'm trying to create a slide gallery of images. It doesn't need to run automatically. I just want it to have a previous and next button so the user can navigate manually.

我的问题是我的代码无法正常工作. NEXT按钮，当我再次尝试单击它时，它仅跳至第二张图像，而从未跳至其余图像.单击上一个"按钮时，应该显示最后一个图像或上一个图像，但不显示.

My problem is my code doesn't work. The NEXT button, it only jumps to the second image and never goes to the remaining image when I try clicking it again. The PREVIOUS button when clicked, should show the last image or the previous one but it doesn't.

请帮帮我.请参阅我的代码此处

Please help me out. See my code here

推荐答案

您的问题是您没有在将前一个类添加到当前项目之前删除它.因此，一旦点击了下一个，您将拥有前两个项目，并且找到了第一个项目.

Your problem is that you are not removing the previous class before you add it to the current item. So once you've hit next, you have 2 items that are previous and it finds the first one.

$('.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');

修复该问题后，您需要注意打最后一张图像的情况.您要保留在该图像上还是在周围转圈?

Once you have that fixed, you'll need to take care of the case where you've hit your last image. Do you want to stay on that image, or circle around?

这篇关于带有下一个/上一个按钮的jQuery图片库无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！