Javascript 图库，使用 "for" 循环添加图像

Question

我正在我的项目中创建画廊，但我不想垃圾邮件清除 html 并在我的代码中重复它 20 次。我想在 javascript 中创建循环以从我的文件夹中获取图像数量，然后将其添加到一个 div 中。我已经创建了代码，但我不知道如何执行它。代码：

function addingImages() {

    for (var i = 0; i <= ***; i++) {
        var image = document.createElement("img");
        image.setAttribute("src", "images/1.jpg");
        document.querySelector(".gallery").appendChild(image);
    }
}

*** - 我不知道那里应该有什么。而且我知道我需要变量来增加以后的图像数量，例如 1.jpg 、 2.jpg、3.jpg 等

Answer 1

您需要从 1 循环到 20，因此将循环计数设置为 20。然后在 setAttribute 函数中使用循环索引，如下所示：

   function addingImages() {
    for (var i = 1; i <= 20; i++) {
        var image = document.createElement("img");
        image.setAttribute("src", "images/" + i + ".jpg");
        document.querySelector(".gallery").appendChild(image);
   }
}

Answer 2

有了Jquery，你还可以这样使用：

function addImages(img_count) {
   var images='';
   for (var i = 1; i <= img_count; i++) {
    image = '<img src="images/'+i+'.jpg">';
   }
   $(".gallery").html(image);
}

Answer 3

您需要添加此 jquery(Ajax) 函数而不是 for 循环，因为您需要在将图像包含在图库中之前检查文件夹中的图像 $.ajax({ url: "images/", 成功：函数（数据）{ $(数据).find("a:contains(.jpg)").each(函数(){ var filename = this.href.replace(window.location.host, "").replace("http://", ""); $("gallery").append(""); }); } });

Javascript 图库，使用 "for" 循环添加图像

Javascript gallery, adding images with "for" loop

html

javascript

jquery

gallery