带有“下一个/上一个”按钮的Jquery图库无法正常工作

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

我的问题是我的代码不起作用。 NEXT按钮，它只跳转到第二个图像，当我再次尝试点击它时，它永远不会转到剩余的图像。 单击时，PREVIOUS按钮应显示最后一个图像或前一个图像但不显示。

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

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'); 

一旦你修好了，你需要处理你最后一张图片的情况。 你想留在那个图像上，还是绕圈子？