Question

我尝试在页面上创建图像来表示缩略图，但是我当前的代码只显示目录中的最后一张图像。如何使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>

Answer 1

制作一个数组来保存所有图像。

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

Answer 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。

Answer 3

以下是一个例子：

<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>

HTML＆amp; Javascript在页面上为目录中的每个图像创建新图像

3 个答案: