轮播内容过渡必须用CSS transition或animation配合JS控制，纯HTML无法实现；opacity+transition是最稳定方案，需绝对定位重叠图片并严格按序切换透明度，禁用display切换以防闪动和重排。
轮播内容过渡效果不是靠 HTML 单独实现的，必须用 CSS 的 transition 或 animation 配合 JS 控制显隐或位移状态；纯 HTML 标签本身不提供任何过渡能力。
用 opacity + transition 实现淡入淡出
这是最易控制、兼容性最好、且不易出布局抖动的方案。关键在于让所有图片重叠定位，再通过透明度切换，而非 display 切换。
- 容器必须设
position: relative，每张<img alt="如何通过HTML制作轮播内容过渡效果" >设position: absolute; top: 0; left: 0;，确保堆叠对齐 - 统一给图片加
opacity: 0; transition: opacity 0.4s ease-in-out;，第一张额外加opacity: 1; - JS 切换时，先给所有图片设
opacity: 0，再给目标图设opacity: 1—— 顺序不能反，否则会出现“全黑”间隙 - 别用
visibility: hidden替代opacity: 0，它不触发 transition，且仍占渲染流
用 transform: translateX() 实现滑动过渡
适合横向排列多图、想模拟“胶卷滑过窗口”的场景，但对结构和尺寸要求严格。
- 图片容器（如
<div class="carousel-images">）必须设 <code>display: flex或固定总宽度 +white-space: nowrap - 父容器要加
overflow: hidden，否则滑动时图片会溢出可见区 - 每张图宽度必须一致，否则
translateX(-n * width)会偏移错位；建议用width: 100%配合容器 flex 等分，而非写死像素值 - CSS 中直接写
transition: transform 0.3s ease-in-out，不要在 JS 里动态改style.transition，Safari 和旧版 Chrome 可能不识别 -
display是离散属性，浏览器不支持对其插值动画 - 每次
display: none触发重排（reflow），若容器高度不固定，会导致页面其他内容上下跳动 - 如果硬要用，只能搭配 JS 手动控制 setTimeout + class 切换模拟，但逻辑复杂、易出竞态，得不偿失
- 记录
touchstart的clientX，touchend时再取一次，差值大于阈值（如 50px）才触发下一张/上一张 - 避免同时响应
click和touchend导致重复触发，可用preventDefault()或节流标记 - 滑动过程若想有跟随反馈，需监听
touchmove动态更新transform: translateX()，但这已超出基础过渡范畴，属于手势驱动动画
为什么 display: none/block 不适合做过渡
它无法被 CSS transition 捕获，切换瞬间完成，没有中间帧。用户会感知到“闪一下”或“跳一下”，尤其在慢网或低端设备上更明显。
立即学习“前端免费学习笔记（深入）”；
移动端触摸滑动需要额外处理
仅靠 mouseenter/click 事件在手机上完全不可用，必须监听 touchstart/touchend 并计算位移方向。
真正容易被忽略的是：过渡效果是否在图片加载完成后再启动。如果某张图还没 img.complete === true 就开始 fade in，会先显示空白再闪出图片。务必在 JS 切换前检查加载状态，或用 IntersectionObserver + img.decode() 做前置准备。
