JavaScript 遍历图片数组并显示 - 前端开发教程 - 常规

本文将介绍如何使用 JavaScript 遍历图片数组集合，并将其显示在网页上。通过简单的代码示例，演示了如何利用循环语句和 DOM 操作实现图片的动态展示。

首先，需要在 HTML 中创建一个用于展示图片的容器，例如：

<div id='image-container'></div>

然后，在 JavaScript 中定义一个图片数组，例如：

var images = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg'
];

接下来，使用循环语句遍历图片数组，并通过 DOM 操作将每张图片添加到容器中，例如：

var container = document.getElementById('image-container');

for (var i = 0; i < images.length; i++) {
  var image = document.createElement('img');
  image.src = images[i];
  container.appendChild(image);
}

这样就可以遍历图片数组集合并将每张图片显示在页面上了。完整的代码示例如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>遍历图片数组集合并显示</title>
  </head>
  <body>
    <div id='image-container'></div>
    <script>
      var images = [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg'
      ];

      var container = document.getElementById('image-container');

      for (var i = 0; i < images.length; i++) {
        var image = document.createElement('img');
        image.src = images[i];
        container.appendChild(image);
      }
    </script>
  </body>
</html>