用原生<dialog>可实现轻量图片预览幻灯片：为缩略图设data-index，用<dialog>容器加载<img>，点击触发showModal()，监听keydown（过滤event.repeat）切换并预加载图片，坚持用<img>保障可访问性、缩放与打印支持。
直接用原生 HTML + CSS + JavaScript 就能做出轻量、可控、无依赖的图片预览幻灯片，不需要引入 swiper 或 lightgallery 这类库——除非你明确需要缩放、下载、多图分组等高级功能。
怎么用 dialog 元素实现点击放大+左右切换
现代浏览器（Chrome 97+、Firefox 98+、Safari 15.4+）已原生支持 <dialog>，它是做模态图片预览最干净的方案：自动处理焦点、背景遮罩、Esc 关闭，且语义正确。
- 把所有图片用
<img>列在页面中，加data-index标序号，例如：<img src="a.jpg" data-index="0"> - 用一个空的
<dialog id="preview-dialog"><img id="preview-img"></dialog>作为容器 - 点击缩略图时，读取其
src和data-index，赋给#preview-img.src，再调用dialog.showModal() - 监听
keydown：按 ←/→ 键时，更新#preview-img.src并同步修改data-index属性（用于后续逻辑）
注意：Safari 对 dialog 的 showModal() 支持良好，但不支持 returnValue，所以别依赖它传值；关闭后手动重置 data-index 即可。
keydown 切换图片时如何避免越界和卡顿
左右键切换的核心是维护当前索引 currentIndex，并确保它始终落在图片数组长度范围内。越界会导致 undefined 或白屏，而频繁触发（如长按方向键）可能让状态不同步。
立即学习“前端免费学习笔记（深入）”；
- 用
event.repeat过滤重复触发：只在!event.repeat时执行切换 - 切换前先获取全部图片元素：
const items = document.querySelectorAll('img[data-index]')，再算items.length - 更新索引用取余或条件判断：
currentIndex = (currentIndex + 1 + items.length) % items.length（防负数） - 不要在
keydown里直接改src，先设loading = true，用new Image().src = nextSrc预加载，onload后再赋值给#preview-img.src，避免闪白
为什么不用 background-image 而坚持用 <img> 标签
用 CSS background-image 看似方便，但在幻灯片场景下会踩三个硬坑：
- 无法自然响应
alt文本和屏幕阅读器，可访问性直接归零 - 图片加载失败时，
<div style="background: url(...)"></div>不会触发onerror，也难统一 fallback - 移动端双指缩放仅对
<img>原生生效；background-image必须额外写 pinch-zoom 逻辑，兼容成本高 - 打印页面时，
background-image默认不输出（需显式设@media print { background: ... }），而<img>自动包含
真正麻烦的不是切换动效，而是图片尺寸不一导致的居中拉伸失真——建议所有预览图服务端统一转成等宽（如 1200px），再用 object-fit: contain + max-width/max-height: 90vh 控制视口内安全显示。
