如何用纯CSS和HTML实现无留白的循环/回弹图片轮播？

问题分析 #

当前轮播动画将容器左移-100%后再回弹，导致图片完全移出容器时出现大片空白。核心原因是动画滑动距离超出了图片总宽度，且没有衔接后续内容或及时复位。

方案1：重复图片实现无缝循环 #

这是实现无限轮播最常用的方法，通过复制图片列表，配合容器隐藏溢出，让滑动过程视觉上无断点。

修改后的HTML #

在原图片列表后复制一遍相同的图片：

<div class="imagecarousel-container">
  <div class="imagecarousel">
    <img src="img1" alt="" />
    <img src="img2" alt="" />
    <img src="img3" alt="" />
    <img src="img4" alt="" />
    <!-- 复制原图片列表，实现无缝衔接 -->
    <img src="img1" alt="" />
    <img src="img2" alt="" />
    <img src="img3" alt="" />
    <img src="img4" alt="" />
  </div>
</div>

修改后的CSS #

/* 新增外层容器，负责隐藏溢出内容 */
.imagecarousel-container {
  position: relative;
  height: 233px;
  margin-bottom: 30px;
  width: 100%;
  overflow: hidden;
}

.imagecarousel {
  position: relative;
  height: 100%;
  display: flex;
  width: 200%; /* 因包含两遍图片，宽度设为200% */
}

.imagecarousel img {
  margin: 0 25px;
  box-shadow: 2px 2px 8px #8a8a8a;
  flex-shrink: 0; /* 禁止图片被压缩，保持原始尺寸 */
}

.imagecarousel {
  animation: bannermove 50s linear infinite;
}

@keyframes bannermove {
  0% {
    left: 0;
  }
  100% {
    left: -100%; /* 滑动距离等于容器宽度的一半，刚好衔接第二遍图片 */
  }
}

原理：外层容器隐藏溢出，内层容器包含两遍图片，动画从初始位置滑到-100%时，第一遍图片刚好完全移出容器，第二遍图片的开头正好衔接上，实现无空白的无限循环。

方案2：即时回弹避免空白 #

如果不想重复图片，可调整动画关键帧，让图片滑动到即将露出空白的位置时立刻复位，而非缓慢回弹。

修改后的CSS（无需改动HTML） #

.imagecarousel {
  position: relative;
  height: 233px;
  margin-bottom: 30px;
  display: flex;
  width: 100%;
  overflow: hidden; /* 隐藏溢出内容 */
}

.imagecarousel img {
  margin: 0 25px;
  box-shadow: 2px 2px 8px #8a8a8a;
  flex-shrink: 0; /* 禁止图片压缩 */
}

.imagecarousel {
  animation: bannermove 10s linear infinite;
}

@keyframes bannermove {
  0% {
    left: 0;
  }
  90% {
    /* 滑动到最后一张图片刚好在容器内显示的位置 */
    left: calc(-100% + 100vw);
  }
  90.1% {
    left: 0; /* 立刻复位，避免空白 */
  }
  100% {
    left: 0;
  }
}

原理：通过calc(-100% + 100vw)计算最大滑动距离，确保最后一张图片始终在容器内，然后在动画接近尾声时瞬间复位，完全消除空白阶段。

内容的提问来源于stack exchange，提问作者PHPuser