使用JavaScript迭代通過圖像文件夾，並將結果添加到HTML

嘿，我想找出一種方法讓我添加一些媒體（圖像和視頻）到我的網頁。我有一個部分，我只添加圖像和視頻，它是基於HTML的所以我想我可以找到一種方法來爲每個部分創建一個文件夾，在該文件夾中添加所有媒體，然後讓Javascript執行工作。這是我到目前爲止編寫的腳本。使用JavaScript迭代通過圖像文件夾，並將結果添加到HTML

的Javascript

var files = {'jpg':4}; 
var pageName = "Wimoveh"; 
for (var ext in files){ 
for (var i = 0; i < files[ext]; i++){ 
    var src = "Images/GalleryOne" + pageName + "-" + (i+1) + "." + ext;} 
}

這個腳本看起來在文件夾GalleryOne的圖片與名字Wimoveh以「 - 」通過所有的內容分離，然後遍歷相匹配的名和擴展名。我不知道的是如何在HTML中輸出結果。

來源

2012-10-14 Drucker

內，您的循環：

var img = new Image(); 
img.src = src; 
containerElement.appendChild(img);

哪裏containerElement是您要的圖像添加到HTML元素的引用。（注意，你需要推遲，直到DOM加載這樣做）

來源

2012-10-14 16:42:51 generalhenry

謝謝，關於延遲，它與document.ready有什麼關係？ – Drucker

是的，document.ready是一樣的東西，它在dom被解析時運行。你可以使用jQuery'$（document）.ready（myfunc）;'jQuery'$（myfunc）;'或vanilla'window.onload = myfunc;' – generalhenry

好，非常感謝。 – Drucker

由於Generalhenry在他的帖子中指出：

哪裏containerElement是對HTML元素的引用您要添加的圖像到。（注意，你需要延遲到dom已經加載完成）

containerElement是你想要的HTML元素。例如：

<HTML> 
<BODY> 
    <div class="photos"> 
     Your images would populate here. 
    </div> 
</BODY> 
</HTML>

通過你的腳本，每次循環當代碼達到photos.appendChild（IMG）您的頁面將圖像添加到該div類。

來源

2016-03-20 09:42:09

你有點晚...你使用IE瀏覽器嗎？ – xdevs23

是的，我想，但有一個未答覆的部分，所以我想我會回答。「你有沒有使用IE瀏覽器」......這是什麼？ –

是的，你的回答實際上是好的，但對於誰在問，肯定沒有用。但請留在這裏，因爲稍後有人可能需要它。 IE = Internet Explorer。 – xdevs23

使用JavaScript迭代通過圖像文件夾，並將結果添加到HTML

回答

相關問題