Question

我正在尝试设置一个图库，您可以点击一个拇指，然后您可以使用next和prev按钮。我的问题是，用户最初可以点击我需要检测的任何图像以及下一个或上一个图像将要进行的锻炼，并将显示src替换为下一个图像的src。我只是试图让下一个按钮先工作，因为前一个按钮的工作原理相同。我一直在尝试使用.next（），但它确实让我感到困惑。

任何帮助都会很棒。

这是我所拥有的jsfiddle以及我写的jquery，问题是下一个按钮的底部位置：

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

以下是使用prev和next按钮的示例：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');
});

Answer 2

您需要在点击时设置当前图片：

thisImage = $(this).closest('.imageContainer');

然后在下一次单击时更改代码：

nextImage = thisImage.next().find('.thumb').attr('src');

请参阅http://jsfiddle.net/c9Jkv/24/

上的示例

Answer 3

我已经通过在当前选定的图片上添加selected类并使用它来“找到”下一个拇指来更新代码。

http://jsfiddle.net/c9Jkv/25/

虽然这看起来颇为人为，但如果你只是维护某种数据结构，例如它可能会更容易一些。一个数组或对象或某些可能使它更容易的东西，而不是依靠DOM来做所有事情。

Answer 4

我建议使用Colorbox或Shadowbox

jquery在单击的实例后找到下一个图像

4 个答案: