-1

我正在尝试使用html css jquery. 我有一个模式窗口来显示点击的图像。在我的模态窗口中，我有一个上一个和下一个按钮。

我的问题是当有人单击该按钮时，我如何显示以前的图像或下一个图像。

这是我的jsFiddle

我用来显示在图像中单击的 jquery 代码。

$(function(){
$('.gallery a').click(function(evt) {
    evt.preventDefault( );
    var imgPath = $(this).attr('href');
    $('.gallery-overlay').show()
    .find('.gallery-image').attr('src',imgPath);
    return false;
    });

});

4

2 回答 2

1

将此添加到您的 jQuery 中。

在你的函数中声明一个变量当前图像并将当前图像保存在该变量中。每当更改当前图像时更新变量。

更新了 jsfiddle

单击图像中的第二张图像，然后查看上一张和下一张图像。

$('.gallery-control-previous').click(function(){
        var imgPath = current_img.prev().attr('href');
        current_img = current_img.prev();
        $('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});
$('.gallery-control-next').click(function(){
        var imgPath = current_img.next().attr('href');
        current_img = current_img.next();
        $('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});

如果您已经理解了这个答案，请在接下来显示的代码中添加检查，仅当元素存在时才使用它们。

你可以找到如何做到这一点，

在这里..

更新。

获取下一行的第一个孩子，并通过它。

$('.gallery-control-next').click(function(){

        if(current_img.next().length){
            current_img = current_img.next();
        }else{
            current_img = current_img.parents(".row").next(".row").find("a:first");
        }
        var imgPath = current_img.attr('href');
        $('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
    });
于 2013-07-27T06:33:38.690 回答
1

我已经img_no为每个标签添加了一个标签来识别当前的活动图像并获取下一个或上一个图像

工作演示

$(function () {
    $('.gallery a').click(function (evt) {
        evt.preventDefault();
        var imgPath = $(this).attr('href');
        var img_no = $(this).attr('img_no');
        $('.gallery-overlay').show()
            .find('.gallery-image').attr('src', imgPath).attr('img_no', img_no);
        return false;
    });
});
i = 1;
$('.row a img').each(function () {
    $(this).attr('img_no', i);
    $(this).parents('a').attr('img_no', i);
    i++;
});
images_length = i - 1;
console.log(images_length);
$('.gallery-control-next').click(function () {
    var img_no = $(this).parent().parent().find('.gallery-image').attr('img_no');
    img_no++;
    if (img_no > images_length) {
        img_no = 1;
    }
    $('.row a').each(function () {
        if ($(this).attr('img_no') == img_no) {
            imgPath = $(this).attr('href');
        }
    });
    $('.gallery-imagebox img').attr('src', imgPath).attr('img_no', img_no);
});
$('.gallery-control-previous').click(function(){
    var img_no = $(this).parent().parent().find('.gallery-image').attr('img_no');
    img_no--;
    if (img_no <= 0) {
        img_no = images_length;
    }
    $('.row a').each(function () {
        if ($(this).attr('img_no') == img_no) {
            imgPath = $(this).attr('href');
        }
    });
    $('.gallery-imagebox img').attr('src', imgPath).attr('img_no', img_no);
});
于 2013-07-27T06:52:32.907 回答