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

Posted 2023-02-25

【中文标题】带有下一个/上一个按钮的 Jquery 图像库无法正常工作

【英文标题】：Jquery Image gallery with Next/Previous buttons doesn't work correctly

【发布时间】：2013-07-31 15:30:25

【问题描述】：

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

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

请帮帮我。看我的代码here

【参考方案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');

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

【讨论】：

我可以使用 NEXT 按钮解决问题。谢谢你 ;) 现在我解决了这个问题，我想让它绕着我转，我只是不知道我该怎么做。任何提示我应该如何开始？ ;(

这只是添加一个 if 来检查你是否已经结束的问题。看到这支笔cdpn.io/FhDjA

现在太棒了！从来没有想过一个简单的 if 语句可以做到这一点。我要研究那个。非常感谢您的帮助:)

不客气。我只是对数字 3 进行了硬编码，如果您想让它更灵活，请将其替换为一个变量，该变量是滑块中图像的计数。 cdpn.io/FhDjA