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

时间:2013-07-31 15:30:25

标签: jquery next

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

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

请帮帮我。请参阅我的代码here

1 个答案:

答案 0 :(得分:2)

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

修复完成后,您需要处理上次拍摄图片的情况。你想留在那张照片上,还是想转圈?