第 06 版·代码
一个小而够用的灯箱
灯箱不需要插件。一个 <dialog>,一组按钮,几十行事件就够了。
打开
function openLightbox(src, group) {
dialog.querySelector('img').src = src;
dialog.showModal();
}左右切换
把所有图片放进同一个数组,记录当前下标,按左右键时取模:
const next = () => show((index + 1) % items.length);
const prev = () => show((index - 1 + items.length) % items.length);别忘了
Esc关闭- 点击遮罩关闭
- 打开时锁住页面滚动
- 手机上支持左右滑动
小功能,但用起来顺不顺手,差别很大。
本版编辑 / 醍醐之 · 第 06 版 · 2026-10-01