如何在Javascript中演示多图？[已关闭]

在Javascript中实现多图展示通常涉及到HTML、CSS和JavaScript的结合使用。以下是一个简单的示例，展示如何在一个网页上动态加载并展示多张图片。

HTML部分

首先，创建一个HTML文件，定义一个容器来放置图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多图展示</title>
    <style>
        .image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .image-container img {
            width: 200px;
            height: 200px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="image-container" id="imageContainer"></div>
    <script src="script.js"></script>
</body>
</html>

JavaScript部分

接下来，创建一个名为script.js的JavaScript文件，用于动态加载图片：

// 假设我们有一个图片URL数组
const imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
    // 更多图片URL...
];

// 获取图片容器
const imageContainer = document.getElementById('imageContainer');

// 遍历图片URL数组，为每张图片创建一个<img>元素，并添加到容器中
imageUrls.forEach(url => {
    const img = document.createElement('img');
    img.src = url;
    imageContainer.appendChild(img);
});

解释

HTML部分：定义了一个div容器，用于放置图片，并通过CSS设置了容器的样式，使其能够以灵活的方式展示图片。
JavaScript部分：
- 定义了一个包含图片URL的数组。
- 获取HTML中的容器元素。
- 遍历图片URL数组，为每个URL创建一个<img>元素，并设置其src属性为对应的URL。
- 将创建的<img>元素添加到容器中。