使用JavaScript实现逐张显示随机图片功能的问题求助

问题原因 #

你原代码的问题在于setTimeout仅触发1次图片生成函数，函数内部直接循环插入了全部12张图片，自然没有逐张间隔的效果，同时原有随机逻辑可能出现同一张图片重复展示的问题。

排版优化 #

可以给容器加固定宽度，刚好容纳4张100px宽度的图片，自动实现每行4张、共3行的排版效果。

完整修改代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Image Generator</title>
    <script src="main.js"></script>
    <style>
        #result {
            width: 400px;
            display: flex;
            flex-wrap: wrap;
        }
        #result img {
            width: 100px;
            height: 100px; /* 可根据实际图片比例调整 */
        }
    </style>
</head>
<body onload="initImgLoop();" style="max-width: 400px;">
<h2 style="color: blue">Random Image Generator</h2>
<br>
<div id="result"></div>   
</body>  
</html>

JavaScript代码

// 预定义图片数组
const imgList = [
    "images/1.png",
    "images/2.png",
    "images/3.png",
    "images/4.png",
    "images/5.png",
    "images/6.png",
    "images/7.png",
    "images/8.png",
    "images/9.png",
    "images/10.png",
    "images/11.png",
    "images/12.png"
];
let shuffledList = []; // 存储打乱后的图片序列
let currentIndex = 0; // 当前要展示的图片下标
let imgTimer = null;

// 洗牌算法：打乱数组，保证12张图不重复
function shuffleArray(arr) {
    let newArr = [...arr];
    for (let i = newArr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [newArr[i], newArr[j]] = [newArr[j], newArr[i]];
    }
    return newArr;
}

// 逐张插入图片
function appendOneImg() {
    const resultBox = document.getElementById('result');
    // 插入当前下标的图片
    resultBox.innerHTML += `<img src="${shuffledList[currentIndex]}" alt="随机图片">`;
    currentIndex++;
    // 12张全部插完的逻辑
    if (currentIndex >= 12) {
        clearTimeout(imgTimer);
        // 等待1秒后重置，开始下一轮
        setTimeout(() => {
            resultBox.innerHTML = '';
            shuffledList = shuffleArray(imgList);
            currentIndex = 0;
            startAppend();
        }, 1000);
        return;
    }
    // 继续下一张
    imgTimer = setTimeout(appendOneImg, 1000);
}

// 开始逐张插入
function startAppend() {
    imgTimer = setTimeout(appendOneImg, 1000);
}

// 初始化循环
function initImgLoop() {
    shuffledList = shuffleArray(imgList);
    startAppend();
}

实现效果说明 #

• 页面加载后先打乱12张图片的顺序，每隔1秒插入1张图片
• 容器宽度固定为400px，每张图片宽100px，自动换行实现每行4张、共3行的排版
• 12张全部展示完成后，等待1秒清空容器，重新打乱图片序列，再次循环展示

内容的提问来源于stack exchange，提问作者webspurs