HTML & Javascript 在页面上为目录中的每个图像创建新图像答案

【问题标题】：HTML & Javascript create new image on page for each image in a directoryHTML & Javascript 在页面上为目录中的每个图像创建新图像
【发布时间】：2015-06-24 13:19:48
【问题描述】：

我正在尝试在页面上创建一个图像来表示缩略图，但是我当前的代码只显示了目录中的最后一个图像。如何让 for 循环在每次迭代时在我的页面上创建一个新图像。

<img id="tpic" src="http://example.net/test%20page/001.jpg" width="20%" height="20%">

<script type="text/javascript">
var y = 1;
var picurl2 = "http://example.net/test%20page/00"+y+".jpg";
document.getElementById("tpic").src=picurl2;
document.getElementById("divThumb").innerHTML = document.getElementById("pic2").src;

for (y = 1; y < 18; y++)
{
  if (y<10){
    picurl2 = "http://example.net/test%20page/00"+y+".jpg";
  }
else{
   picurl2 = "http://example.net/test%20page%20/0"+y+".jpg";
 }

  document.getElementById("tpic").src=picurl2;

}

</script>

【问题讨论】：

忽略 document.getElementById("divThumb").innerHTML = document.getElementById("pic2").src.
看来您正在将图像源更新为相同的 ID，因此很自然，源正在发生变化，但它发生得如此之快以至于它似乎只显示迭代中的最后一张图像，因为那是它停止了。您是要一次通用所有图像缩略图，还是要循环浏览同一 Div 中的图像缩略图，并显示某种暂停或过渡？
尝试在这些函数的帮助下添加新的<img>：stackoverflow.com/questions/4793604/…

标签： javascript html image loops

【解决方案1】：

这是一个例子：

<div id="placehere"></div>
<script type="text/javascript">
  function isIE() {
    var myNav = navigator.userAgent.toLowerCase();
    return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
  }

  function createImg(src, width, height) {
    var img = isIE() ? new Image() : document.createElement('img');
    img.src = src;
    if (width != null) img.style.width = width;
    if (height != null) img.style.height = height;
    return img;
  }

  for (y = 1; y < 18; y++) {
    var picurl2;
    if (y < 10) {
      picurl2 = "http://example.net/test%20page/00" + y + ".jpg";
    } else {
      picurl2 = "http://example.net/test%20page%20/0" + y + ".jpg";
    }
    document.getElementById("placehere").appendChild(createImg(picurl2, "20%", "20%"));
  }
</script>

【讨论】：

【解决方案2】：

您可以简单地在 for 循环中使用 document.createElement() 来创建图像并附加它们的 src 属性，如下所示：

for (y = 1; y < 18; y++) {
    var img = document.createElement("img");
    if (y < 10) {
        img.src = "http://example.net/test%20page/00" + y + ".jpg";
    } else {
        img.src = "http://example.net/test%20page%20/0" + y + ".jpg";
    }

    document.body.appendChild(img);
}

这是DEMO fiddle。

【讨论】：

【解决方案3】：

创建一个数组来保存所有图像。

var imgs = ["one.jpg", "two.jpg", "three.jpg"];

循环遍历数组并为数组中的每个图像添加一个新图像到页面

for(i = 0; i < imgs.length; i++)
{
    document.getElementById("placeholder").innerHTML += "<img src='"+ imgs[i] + "' class='images'></img>";
}

完整代码here

【讨论】：