Javascript画廊，添加“for”循环图像

我在我的项目中创建画廊，但我不想垃圾清除HTML并在我的代码中重复20次。我想在javascript中创建循环以从我的文件夹中获取图像的数量，然后将其添加到一个div中。我创建了代码，但我不知道如何操作。代码：Javascript画廊，添加“for”循环图像

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等更高版本的图像数量。

来源

2017-03-28 FreeStyle09

您需要循环从1到20，因此将循环计数设置为20.然后使用index from环中的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); 
    } 
}

来源

2017-03-28 14:36:16

这是行得通的，其实我一直在想它，但这不是我想要去的方式。我需要动态代码。我的意思是，后来在两个月内，我想将图像添加到我的文件夹中，而不是更改代码中的数字。你知道我的观点吗？ i <= Something.length ... + something.length + ... 但是我不知道如何读取我的图片数量：/ – FreeStyle09

嗯，单独使用JavaScript是不可能的。您需要创建一个服务器方法来统计图像并通过javascript ajax调用来调用该方法。然后得到结果并循环所需的迭代量。 –

我觉得我很难回答这个问题，但这不能在纯js中完成。好吧，但至少我现在知道:)我很高兴它实际上工作，我需要记住改变我的迭代总是当我将添加一些图像。谢谢你的帮助！ – FreeStyle09

使用jQuery，您还可以使用此：

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

来源

2017-03-28 14:53:59

这不工作：/ – FreeStyle09

您需要添加这个jQuery相反的for循环（阿贾克斯）功能，因为你需要检查图像在您的文件夹之前将其包含在图库中 $ .ajax（{ url：“images /”， success：function（data）{ $（data）.find（“a：contains（.jpg）”）。each（function（）{ var filename = this.href.replace （window.location.host，“”）.replace（“http：//”，“”）; $（“gallery”）。append（“”）; }）; } }）;

来源

2017-03-28 15:29:24 Osama

Javascript画廊，添加“for”循环图像

回答

相关问题