Javascript 从库中获取下一个图像和上一个图像

我正在尝试使用

html

css

jquery

为自己的图像库编写代码。我有一个模式窗口来显示点击的图像。在模态窗口中，我有一个“上一步”和“下一步”按钮

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

这是我的

我用来在图像中显示单击的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;
    });

---

}))

将其添加到jQuery中

在函数中声明变量current image，并将当前图像保存在该变量中。每当更改当前图像时更新变量

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

$('.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);
    });

---

我在每个a标签上添加了

img\u no

，以识别当前活动图像并获取下一个或上一个图像

$（函数（）{
$（'.gallery a'）。单击（函数（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\u no'，img\u no）；
返回false；
});
});
i=1；
$（'.a行img'）。每个（函数（）{
$（本）.attr（'img_no'，i）；
$（this）.parents（'a'）.attr（'img_no'，i）；
i++；
});
图像长度=i-1；
控制台日志（图像长度）；
$（'.gallery控件下一步'）。单击（函数（）{
var img_no=$（this.parent（）.parent（）.find（'.gallery image'）.attr（'img_no'）；
img_no++；
如果（图像编号>图像长度）{
img_no=1；
}
$（'.a行'）。每个（函数（）{
if（$（this）.attr（'img\u no'）==img\u no）{
imgPath=$（this.attr（'href'）；
}
});
$（'.gallery imagebox img'）.attr（'src'，imgPath）.attr（'img\u no'，img\u no）；
});
$（'.gallery control previous'）。单击（函数（）{
var img_no=$（this.parent（）.parent（）.find（'.gallery image'）.attr（'img_no'）；
不；
如果（不，下一个和上一个按钮在模式窗口中。要显示模式窗口，请单击第一个图像检查我的答案…！！它有某种错误。检查此小提琴。我在所有链接中添加了图像链接。下一个按钮在单击3次后不起作用。@Shubendra这就是我更新我的答案的原因。您需要检查下一个和上一个元素是否存在。）st.单击3次后，所有图像都显示出来，因此导致了错误。您看到一行只有3个图像。单击3次后，第一行的图像将结束。它将显示底部行的图像检查我的答案…！！@OptimusPrime还有一个问题，有没有更好的方法来完成这一切？就像目前我将所有图像放在一个文件夹中一样d提供图像的url。如果我在数据库中存储图像并从数据库中检索图像是否会更好。我需要更好的技术，以便我的网页能够快速加载感谢tushar。它工作正常。我还有一个问题。图像大小将够大。浏览器可能需要时间下载下一个和上一个图像。我想在浏览器加载图像时显示一些.gif图像。加载完成后，我想显示最终图像。你能告诉我如何实现这一点吗？还有一个问题，有没有更好的方法来完成这一切？比如，目前我将所有图像放在一个文件夹中，并提供图像的url。如果我将图像存储在数据库并从数据库中检索图像。我希望使用更好的技术，以便我的网页能够快速加载。嗯，我的网页更短，更容易理解。：）但对你来说+1。。）
$(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);
});