重复展示多张图片的js

在JavaScript中，如果你需要重复展示多张图片，通常会涉及到DOM操作和循环逻辑。以下是一个基础的示例，展示了如何使用JavaScript来重复展示多张图片。

基础概念

DOM（Document Object Model）：DOM是HTML和XML文档的编程接口。它提供了对文档的结构化的表示，并定义了访问和操作文档的方式。
JavaScript：一种广泛用于客户端Web开发的脚本语言，常用来为网页添加交互性。

类型与应用场景

轮播图：自动或手动切换显示不同的图片。
相册展示：用户可以浏览一系列图片。
动态广告：根据用户的交互或浏览历史展示不同的广告图片。

示例代码

以下是一个简单的JavaScript示例，用于在一个页面上重复展示多张图片：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片展示</title>
<style>
  .image-container {
    display: flex;
    flex-wrap: wrap;
  }
  .image-container img {
    width: 200px;
    height: 200px;
    margin: 5px;
  }
</style>
</head>
<body>

<div id="image-gallery" class="image-container"></div>

<script>
// 图片URL数组
const imageUrls = [
  'path/to/image1.jpg',
  'path/to/image2.jpg',
  'path/to/image3.jpg',
  // 更多图片...
];

// 获取存放图片的容器
const galleryContainer = document.getElementById('image-gallery');

// 循环遍历图片URL数组，并创建img元素添加到容器中
imageUrls.forEach(url => {
  const imgElement = document.createElement('img');
  imgElement.src = url;
  galleryContainer.appendChild(imgElement);
});
</script>

</body>
</html>