jQuery在单击实例后查找下一张图片

Question

我正在尝试建立一个图片库，您可以在其中单击一个拇指，然后可以使用下一个和上一个按钮。我的问题是，用户最初可以单击我需要检测的任何图像，然后单击下一幅或上一张图像，然后将显示src替换为下一幅图像的src。我只是想让下一个按钮首先工作，因为前一个按钮将按照相同的原理工作。我一直在尝试使用.next（），但它确实让我感到困惑。

任何帮助都会很棒。

这是我所拥有的jsfiddle，下面是我编写的jquery，问题是next按钮的最低位：

var numImgs = $('div.locationGallery .polaroidImage').length;
var prevImages = $('.polaroidImage').prevAll().length;
var thisImage;
var imageClicked;
var nextImage;
var nextImage;

$('.polaroidImage').click(function(){
    var prevImages = $(this.parentNode).prevAll().find('.polaroidImage').length;
    if(prevImages > 0){
        $('.prev').show();
    }else{
        $('.prev').hide();
    }
    if(prevImages == (numImgs - 1)){
        $('.next').hide();
    }else{
        $('.next').show();
    }
});

$(".thumb").click(function(){
      imageClicked = '';
      imageClicked = $(this).attr('src');
    $(".imageDisplay").find('img').remove();
    $(".imageDisplay").append("<img src='"+imageClicked+"' />")
});

$('.next').click(function(){
    nextImage = $('.imageContainer').next('img').attr('src');
    alert(nextImage);
});

Answer 1

这是使用上一个和下一个按钮的示例：http : //jsfiddle.net/8FMsH/1/ 在拇指单击时，您需要保存当前图像：

$(".thumb").click(function(){
  imageClicked = $(this);
  $(".imageDisplay").find('img').remove();
  $(".imageDisplay").append("<img src='"+imageClicked.attr('src')+"' />")
});

$('.next').click(function(){
 imageClicked.closest('.imageContainer').next().find('img').trigger('click');
});

$('.prev').click(function(){
 imageClicked.closest('.imageContainer').prev().find('img').trigger('click');
});