带有Next/Previous按钮的Jquery图像库无法正常工作

eqoofvh9  于 2023-06-22  发布在  jQuery
关注(0)|答案(1)|浏览(91)

我正在尝试创建一个幻灯片图片库。它不需要自动运行。我只是希望它有一个上一页和下一页按钮,以便用户可以手动导航。
我的问题是我的代码不工作。下一个按钮,它只跳转到第二个图像,从来没有去剩下的图像时,我尝试再次点击它。单击PREVIOUS按钮时,应显示最后一张图像或前一张图像,但它没有显示。
请帮帮我查看我的代码here

pprl5pva

pprl5pva1#

您的问题是在将前一个类添加到当前项之前没有删除它。所以一旦你点击下一个,你有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');

一旦你有固定的,你需要照顾的情况下,你已经击中了你的最后一个图像。你想继续看还是绕过去?

相关问题