使用JS按顺序显示隐藏多张图片并支持单张时长控制的实现咨询

• 第一步：将所有需要展示的图片的路径、单独设置的显示时长统一维护在一个配置数组中，后续调整图片顺序、增减图片、修改单张显示时长只需修改该数组即可，无需改动核心逻辑
• 第二步：封装延时工具函数，结合async/await保证执行顺序：显示当前图片→等待设定的显示时长→隐藏当前图片→自动切换到下一张执行相同逻辑，直到所有图片都完成一次显示隐藏流程
• 第三步：增加按钮防重复点击逻辑，触发流程后先禁用按钮，所有图片执行完毕后再恢复可用状态，避免流程重叠

<html>
<body>
<h1>多图片顺序显示测试</h1>
<p><b>按顺序轮播图片</b></p>
<p>点击按钮开始按顺序显示图片，每张图片显示时长可单独配置</p>
<!-- 触发按钮 -->
<button id="showBtn">开始轮播</button>
<!-- 图片容器，所有图片共用这个标签动态切换src，也可以提前写多个img标签分别控制 -->
<img src="" alt="" id="displayImg" width="300" height="300" style="display: none" />

<script>
// 核心配置：按顺序填写要显示的图片路径、对应显示时长（单位毫秒），可自由增减修改
const imageConfig = [
  { src: "img/img-a.jpg", duration: 100 },
  { src: "img/img-b.jpg", duration: 200 },
  { src: "img/img-c.jpg", duration: 500 },
  // 继续加更多图片即可
]

const showBtn = document.getElementById('showBtn')
const displayImg = document.getElementById('displayImg')

// 延时工具函数
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

// 按钮点击事件
showBtn.addEventListener('click', async function() {
  // 点击后禁用按钮，防止重复触发
  showBtn.disabled = true
  showBtn.textContent = '轮播中...'
  
  // 遍历配置数组按顺序执行
  for (let i = 0; i < imageConfig.length; i++) {
    const current = imageConfig[i]
    // 替换图片路径并显示
    displayImg.src = current.src
    displayImg.style.display = 'block'
    // 等待设定的显示时长
    await delay(current.duration)
    // 隐藏当前图片
    displayImg.style.display = 'none'
    // 如果需要两张图片之间加间隔可以在这里再加一行await delay(间隔时长)
  }

  // 全部执行完毕恢复按钮状态
  showBtn.disabled = false
  showBtn.textContent = '开始轮播'
})
</script>
</body>
</html>

• 你只需要修改imageConfig数组里的配置项即可适配你的需求，每个配置项的src对应图片的实际路径，duration对应当前图片的显示毫秒数
• 如果需要提前预加载图片避免加载延迟，可以在页面初始化阶段提前创建Image对象加载所有配置里的图片资源
• 如果需要每张图片用独立的img标签而非共用一个，只需要把配置里加id字段，逻辑里切换对应id的显示隐藏即可，整体逻辑不变

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