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」循環圖像

回答

相關問題