Question

我想显示本地文件夹中的图像列表。我想我应该从图书馆查看一本javascript书，因为我的理解已经变得生疏了。

我想要完成的任务：
1.使用每个图像文件的所有URL填充数组 2.而不是编写所有这些img标记，循环遍历数组并将img标记附加到父元素。

我一直在以一种草率的方式接近这一点。有人可以帮忙吗？（顺便说一句，脚本标记包含的代码没有做任何事情就像我得到的那样）。

<!DOCTYPE html>
<html>
<head>
<title> Quick View Gallery </title> 

<script>
var maxPages = 23;
var arr = [];
for (var i = 1; i <= maxPages; i++) {
arr.push(i);
}
</script>

<style>
    img {
        height: 100%;
        width: 100%;
        border: 1px solid #66ccff;
    } 
</style>
</head>
<body bgcolor="#333333">

<div id="comicPages">
    <img src="1.jpg"></img> <p>
    <img src="2.jpg"></img> <br>
    <img src="3.jpg"></img> <br>
    <img src="4.jpg"></img> <br>
    <img src="5.jpg"></img> <br>
    <img src="6.jpg"></img> <br>
    <img src="7.jpg"></img> <br>
    <img src="8.jpg"></img> <br>
    <img src="9.jpg"></img> <br>
    <img src="10.jpg"></img> <br>
    <img src="11.jpg"></img> <br>
    <img src="12.jpg"></img> <br>
    <img src="13.jpg"></img> <br>
    <img src="14.jpg"></img> <br>
<img src="15.jpg"></img> <br>
<img src="16.jpg"></img> <br>
<img src="17.jpg"></img> <br>
<img src="18.jpg"></img> <br>
<img src="19.jpg"></img> <br>
<img src="20.jpg"></img> <br>
<img src="21.jpg"></img> <br>
<img src="22.jpg"></img> <br>
<img src="23.jpg"></img> <br>
</div>
</body>
</html>

Answer 1

如果你的文件名总是像n + .jpg，你可以执行以下操作：

var container = document.getElementById('comicPages');

var images = 23;

for (var i = 0; i < images; i++) {
    // this will create and insert the corresponding image
    // new Image() creates a new <img> element. there is not much of a difference
    // to document.createElement('img'). additional you can call it as:
    // new Image(width, height) in case you already know its dimensions.
    var node = new Image();
    // additional you can also do the following as: node.src = i + '.jpg';
    node.setAttribute('src', i + '.jpg'); // but i like conventions
    container.appendChild(node);

    // this will ensure to insert a line break between each image
    if (i < images - 1) {
        container.appendChild(document.createElement('br'));
    }
}

请记住，在将<div id="comicPages"></div>插入您的身体后，您必须运行此功能。

Answer 2

这是一个非JQuery的答案，因为这个问题没有提出要求。

您可以浏览并为每个页面创建一个图像元素，然后将其附加到漫画书页面。例如：

var arr = [];
for (int i = 1; i <= 23; i++) {
    var ele = document.createElement("img");
    ele.src = i+".jpg";
    arr[i] = ele.src;
    document.getElementById("comicPages").appendChild(ele);
}

这是一个小提琴： https://jsfiddle.net/zwg5gLfu/1/

Answer 3

如果您在阵列中有图像名称列表，那么您可以这样做;

<强>的jQuery

var imageUrlCollection = new Array(); //image URL collection
var parentElement = $('#comicPages');
for (var item = 0; item < imageUrlCollection.length; item++) {
       parentElement.append($('<img>',{id:item,src:imageUrlCollection[item]}));
}

Vanilla JS

var imageUrlCollection = new Array(); //image URL collection
var parentElement = document.getElementById('comicPages');
for (var item = 0; item < imageUrlCollection.length; item++) {
    var image = document.createElement("img");
     image.id = item;
     image.className = "img";
    image.src = imageUrlCollection[item];   
    parentElement.appendChild(image);
}

Answer 4

您可以使用document.createElement，Node#cloneNode和Node#appendChild在漫画书页面中填充图片库。您可能还希望将图像设置为display: block，而不是使用换行符元素（<br>）来分隔它们。

＆＃13;

var maxPages = 23
var comicPages = document.getElementById('comicPages')
var img = document.createElement('img')

for (var i = 1; i <= maxPages; i++) {
  img.src = i + '.jpg'
  img.alt = 'Comic Page (' + i + '/' + maxPages + ')'
  comicPages.appendChild(img.cloneNode())
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title> Quick View Gallery </title>
  <style>
    #comicPages img {
      height: 100%;
      width: 100%;
      display: block;
      color: #fff;
      border: 1px solid #66ccff;
    }
  </style>
</head>

<body bgcolor="#333333">

  <div id="comicPages">
  </div>
</body>

</html>

＆＃13;

Answer 5

以下是最终代码：

<!DOCTYPE html>
<html>
<head>
    <title> Quick View Comic Gallery </title>

<style>
    #comicPages img {
        height: 100%;
        width: 100%;
        display: block;
        border: 1px solid #66ccff;
    } 
</style>
</head>
<body bgcolor="#333333">

<div id="comicPages"></div>

<script>
    var container = document.getElementById('comicPages');
    var images = 23;
    for (var i = 0; i <= images; i++) {
        var node = new Image();
        node.setAttribute('src', i + '.jpg');
        container.appendChild(node);
    }
</script>

</body>

Javascript：使用循环填充数组和URL的图像

5 个答案: