这是一套“点谁谁上位”的全屏画廊。整个视口被一张大图占满，左侧压着编号、标题和一段描述，底部一排小圆角缩略图排成一条。点击其中任意一张，它会从缩略图的位置一路放大、圆角逐渐收平，最终铺满整屏；原本的大图则同步缩小、加上圆角、退回底部那条队列的最后一位。左侧的文案在放大动画进行到一半时才淡入上移，节奏是错开的，所以不会和图片抢注意力。

缩略条不是简单的“除当前项外全部按原顺序排列”，而是一个真正的队列：谁被选走了就从队列里抽出来，被换下的那张排到队尾。所以连续点击时，缩略图会像洗牌一样有序滚动，而不是原地跳变。

这套全屏画廊的四个关键点

大图和缩略图是同一个元素。页面上每张图始终只有一份 DOM，激活态铺满屏幕、非激活态被缩放并平移到底部——所以放大是一次连续的形变，中间没有任何替换或重排，也就不会有闪烁。
位置靠一个偏移序号推导。每张缩略图从队列里取到自己的序号，减去队列中点得到一个可正可负的偏移值，样式用它乘以“缩略图宽度加间距”算出平移量，整排缩略图因此自动居中，不管有几张。
切换只改一个属性。激活与否由一个数据属性标记，所有位移、缩放、圆角、亮度差异都挂在这个选择器上，浏览器只需要在两种 transform 之间过渡。
文案带自己的入场动画。内容块的 key 绑定当前项 id，切换时组件重建并重放淡入动画，延迟被设为放大时长的四成，形成先图后字的层次。

三处决定观感的实现细节

其一，缩略图的位置是用视口单位算的，而不是像素。缩放比例、间距、离底距离三个变量组合出平移量：

transform: translate(calc(var(--offset) * (var(--thumb-scale) * 100vw + var(--thumb-gap))), ...) scale(var(--thumb-scale));

因为缩略图是把整屏大图按比例缩小得到的，它的实际宽度就是视口宽度乘以缩放系数，间距再单独加上去。这样窗口无论怎么变，缩略条都保持等距且居中，不需要任何 JavaScript 参与布局计算。窄屏下媒体查询把缩放系数从 0.11 提到 0.16，缩略图不至于小到点不中。

其二，圆角参与过渡是刻意的。非激活态给了很大的圆角，激活态归零，并把圆角写进 transition 列表。放大过程中圆角逐渐消失，观感上就是“一张卡片摊开成整个屏幕”，比单纯缩放有说服力得多。亮度的过渡时间则单独设得更短，让悬停提亮的反馈保持灵敏。

其三，层级要反着排。样式里给非激活项的层级高于激活项——听起来违和，实际必要：缩略图必须压在全屏大图之上才可点，而激活项已经铺满整屏，压在下面反而正确。这类细节是这种“同一元素两态”方案最容易翻车的地方。

拿到源码后能改什么

内容在脚本顶部的数据数组里，每项包含图片路径、替代文本、标题和描述，增删条目即可，缩略条会自动适配数量。左上角的编号是当前序号与总数自动补零生成的，不用手写。

观感参数集中在样式表最上方：缩略图缩放比例、间距、离底距离、放大时长与缓动曲线。缓动用的是一条先快后缓的贝塞尔曲线，这是这种大位移动画最耐看的一类；想要更利落就缩短时长而不是换更硬的曲线。

左侧文案区是一个独立的竖排容器，带一层从左到右的黑色渐变压底，保证任何图片上文字都能读清。想换成右侧或底部对齐，改这个容器的定位与渐变方向即可。上一张、下一张两个圆形按钮通过操作队列首尾来跳转，逻辑很短，需要加自动播放的话在这里挂定时器最省事。

运行提示：脚本以 ES Module 从 CDN 加载 React 与画廊组件，必须用本地服务器打开，双击 HTML 会空白；内网部署需先把依赖下载到本地并改导入路径。样式对 prefers-reduced-motion 做了处理，开启系统减弱动效后会关闭过渡。建议使用近两年版本的 Chrome、Edge、Firefox 或 Safari。详细运行方法请参见压缩包内的帮助文档。

关于这套图片画廊的常见问题

能放几十张图吗？

结构上可以，但所有图都始终在 DOM 里并铺满屏幕尺寸，图片多了内存占用会明显上升。建议控制在十几张以内，或给非激活项使用较小尺寸的图源，激活时再换高清图。

可以改成竖向的缩略条吗？

可以。把平移的两个方向对调，横向偏移改成纵向偏移，并相应调整视口单位（用 dvh 代替 vw），文案区改到底部或顶部即可。

手机上体验如何？

已经做了窄屏适配：缩略图变大、文案区加宽、内边距收紧。拖拽切换默认是关闭的，移动端主要靠点击缩略图和两个方向按钮操作。

图片加载慢，第一次切换会闪一下怎么办？

因为切换时才真正需要那张图的完整解码。可以给图片加上预加载或在页面初始化时提前请求；也可以先放一张极小的模糊占位图，等大图就位再替换。

它适合放在什么地方

这类“一图占满屏、点击换主角”的形态最适合摄影作品集、建筑与室内设计案例展示、旅游目的地专题、汽车或家具的产品图册。文案区留了标题加长描述的位置，做成带故事的案例页很顺手。同元素双态变换、队列排序与偏移推导的完整实现都在源码里，注释清楚，下载后可查看。