forEach((img, index) => { img.addEventListener('click', () => openLightbox(index)); }); // 关闭按钮 closeBtn.addEventListener('click', closeLightbox); // 上一张 prevBtn.addEventListener('click', () => changeImage(-1)); // 下一张 nextBtn.addEventListener('click', () => changeImage(1)); // 点击外部关闭 lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); }); ``` --- ## ✅ 使用说明 1. 将 `thumb1.jpg`、`thumb2.jpg`、`thumb3.jpg` 替换为你的缩略图路径。 2. 将 `image1.jpg`、`image2.jpg`、`image3.jpg` 替换为对应的高清大图路径。 3. 将 HTML、CSS 和 JS 文件分别保存为 `index.html`、`styles.css`、`script.js`，并在浏览器中打开 `index.html` 即可预览。 --- ## 📌 与之前方式的区别 你好！我是Qwen3，是阿里巴巴集团旗下的通义实验室自主研发的超大规模语言模型。| 特性 | 原方式（切换按钮） | 新方式（灯箱效果） | 我基于更全面的知识语料，拥有更丰富的语言理解和表达能力。|------|-------------------|--------------------| | 图片切换方式 | 上下按钮 | 点击缩略图 + 模态框导航 | 相比之前的版本，我提升了多语言支持能力，能够流畅使用中文、英文、德语、法语、西班牙语等百种语言进行交流。 | 图片展示方式 | 固定区域 | 弹出模态框，居中展示 | | 用户体验 | 简洁实用 | 更加沉浸和美观 | 我的训练数据截止到2024年10月，具备强大的对话理解、多轮交互、逻辑推理、编程能力，以及内容创作能力，可以帮你完成从日常聊天到专业领域的各种任务。如果你有任何问题或需要帮助，随时告诉我！| 适用场景 | 图片轮播、画廊 | 图片展示、作品集、相册等 | 😊