纯CSS实现图片无限循环滚动最稳定方案是多图用“双份内容+flex动画”，单图用“背景平铺+background-position动画”；前者需位移精确等于原始总宽，后者位移量必须严格匹配图片像素宽度。
纯 CSS 就能实现稳定、无闪烁的图片无限循环滚动，关键不在于“怎么动”，而在于“怎么算准位移”和“怎么藏好接缝”。JS 方案虽然灵活，但多数场景下反而引入卡顿、跳帧、响应延迟等问题。
用 flex + 双份图片实现多图水平无限滚动
这是目前最可靠、兼容性最好、也最容易调试的方案。核心是让动画位移终点严格等于原始图片总宽度，且靠复制内容自然衔接，不依赖 JS 重置。
- HTML 中把图片列表写两遍：
<div class="scroll-track"> <img alt="HTML怎么实现图片无限循环_网页图片滚动效果【教程】" ><img alt="HTML怎么实现图片无限循环_网页图片滚动效果【教程】" ><img alt="HTML怎么实现图片无限循环_网页图片滚动效果【教程】" ><img alt="HTML怎么实现图片无限循环_网页图片滚动效果【教程】" ><img alt="HTML怎么实现图片无限循环_网页图片滚动效果【教程】" ><img alt="HTML怎么实现图片无限循环_网页图片滚动效果【教程】" > </div>（后三个是前三个的副本） - CSS 设置：
.scroll-track { display: flex; animation: scrollX 25s linear infinite; }，注意必须用linear，ease会导致速度不均、接缝暴露 - 动画终点必须精确：
@keyframes scrollX { 0% { transform: translateX(0); } 100% { transform: translateX(-1800px); } }——这个-1800px是原始三张图的总宽（含 margin/padding），不是容器宽，也不是“随便估一个” - 每张图加
flex-shrink: 0和固定宽高（如width: 200px; height: 120px;），避免 flex 自动压缩导致总宽缩水 - 外层容器一定要设
overflow: hidden，否则位移过程中边缘会漏出空白或底色
用 background-position 实现单图无限平铺滚动
适合 banner 背景、纹理、线条等重复性强的图像，性能最高，缩放也不撕裂，但只适用于一张图平铺的场景。
- 不用
<img alt="HTML怎么实现图片无限循环_网页图片滚动效果【教程】" >标签，改用容器背景：.banner { background-image: url("strip.png"); background-repeat: repeat-x; } - 动画只动 X 轴：
@keyframes scrollBg { 0% { background-position: 0 0; } 100% { background-position: -800px 0; } }——这里的-800px必须等于原图的像素宽度（比如导出时是 800×100，就填 800） - 动画时长按需调整，但位移量和图宽必须 1:1 对齐，差 1px 都可能在循环点出现半像素错位
- 如果图宽不确定（比如响应式背景），就别用这招；它天然不支持“多图切换”，只适合真正意义上的“无缝条纹”
为什么 setInterval + 切换 src 容易出问题
看似简单，实则隐藏多个不可控环节：图片加载异步、DOM 重排开销、CSS 过渡中断、移动端 touch 响应延迟。尤其在弱网或低端设备上，极易出现白屏、卡顿、跳帧。
立即学习“前端免费学习笔记（深入）”；
-
document.getElementById("img").src = urls[i]触发的是异步加载，没加载完就切下一张，就会闪白 - 每次改
src都触发一次 layout → paint 流程，连续操作容易掉帧 - 想加淡入淡出？得配合
opacity+transition，但 JS 控制时机稍有偏差，就会看到两张图叠在一起或透明过渡残留 - 没有预加载逻辑的话，用户第一次看到的可能是占位色块，体验断层
容易被忽略的三个硬伤点
90% 的“无限滚动失败”都卡在这三点：图片总宽算错、动画终点没对齐、父容器没截断溢出。尤其是当用了 gap、margin、百分比宽或 object-fit 时，实际渲染宽度和你写的 CSS 数值经常不一致。建议用 DevTools 的 Layout 面板直接测量 .scroll-track 的 clientWidth，再减去 padding，拿这个真实值去写动画终点——别信估算，也别信设计稿标注。
