本文介绍如何将文字说明与图片一一绑定，扩展原有随机图片数组结构，并在点击时同步显示图片和对应文字。

要实现“点击后随机显示一张图片并同时展示其专属文字”，关键在于将图片路径与文字作为结构化数据统一管理，而非分别维护两个独立数组。原代码中 myImages1 仅存储字符串（图片路径），扩展思路是改用对象数组（Object Array），每个元素包含 image 和 text 两个属性。

以下是优化后的完整实现：

  
    @@##@@
  
  

let myImages1 = [
  { image: "img1.png", text: "这是第一张图片的说明" },
  { image: "img2.png", text: "这是第二张图片的说明" },
  { image: "img3.png", text: "这是第三张图片的说明" },
  { image: "img4.png", text: "这是第四张图片的说明" }
];

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pickimg2(e) {
  const randomItem = myImages1[getRandomInt(0, myImages1.length - 1)];
  e.target.src = randomItem.image;
  document.getElementById("text").textContent = randomItem.text;
}

✅ 关键改进点说明：

• 使用对象字面量数组替代纯字符串数组，天然保持图文映射关系；
• onclick="pickimg2(event)" 显式传入事件对象，便于精准操作触发元素（e.target）；
• 新增 作为文字容器，通过 textContent 安全更新内容（避免XSS风险）；
• 移除了过时的 document.randimg.src 写法（依赖 name 属性的表单式引用已不推荐），改用标准 DOM 操作。

⚠️ 注意事项：

立即学习“Java免费学习笔记（深入）”；

• 确保页面中 id="text" 的元素存在且唯一；
• 若需支持富文本（如含 HTML 标签），请改用 innerHTML 并严格校验内容来源；
• 建议为 添加 alt 属性以提升可访问性；
• 可进一步封装为可复用函数，支持多组图文轮播场景。

该方案结构清晰、扩展性强，后续如需增加标题、作者、链接等字段，只需在对象中添加新属性即可，无需重构逻辑。