图片随机显示的js

要在网页上实现图片的随机显示，可以使用JavaScript来动态地更改显示的图片。以下是一个完整的示例，包括HTML、CSS和JavaScript代码：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机图片显示</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="image-container">
        <img id="randomImage" src="" alt="随机图片">
    </div>
    <button onclick="changeImage()">更换图片</button>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

.image-container {
    text-align: center;
    margin-top: 50px;
}

#randomImage {
    width: 300px;
    height: auto;
}

JavaScript部分（script.js）

const images = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
    'https://example.com/image4.jpg',
    'https://example.com/image5.jpg'
];

function getRandomImage() {
    const randomIndex = Math.floor(Math.random() * images.length);
    return images[randomIndex];
}

function changeImage() {
    const imgElement = document.getElementById('randomImage');
    imgElement.src = getRandomImage();
}

// 初始化页面时显示一张随机图片
window.onload = changeImage;

解释

HTML部分：定义了一个包含图片和按钮的基本结构。
CSS部分：设置了图片容器的样式，使图片居中显示。
JavaScript部分：
- images数组包含了所有可能显示的图片URL。
- getRandomImage函数随机选择一个图片URL。
- changeImage函数将随机选择的图片URL设置为图片元素的src属性。
- window.onload事件确保页面加载时显示一张随机图片。