纯CSS滑块数学原理解析及七图滑块改造技术咨询

我来帮你拆解原滑块的核心逻辑，以及解决改造七图时遇到的堆叠问题，实现每张图全屏展示30秒的需求。

原滑块的核心数学逻辑 #

这个纯CSS滑块的本质是宽幅容器的位移动画，核心原理分两部分：

1. 容器宽度的比例计算 #

• 外层滑块容器：设置width: 100%; overflow: hidden; position: relative;，只显示视口内的内容。
• 内部图片容器（比如<figure>）：宽度为图片数量 × 100%，比如原代码5张图就是500%，用来横向容纳所有图片。
• 单张图片：宽度为100% / 图片数量（相对于内部容器），比如5张图就是20%，这样每张图的实际宽度刚好等于外层容器的100%（全屏），再通过float: left横向排列。

2. 关键帧动画的时间与位移对应 #

原代码的动画逻辑是：

• 每张图停留展示占总时长的20%，切换位移占5%。
• 位移规则：第k张图对应的left值是-(k-1) × 100%，向左移动k-1倍外层容器宽度，让第k张图对齐外层容器左侧。
• 循环逻辑：动画到100%时位移到最后一张图的位置，然后循环时瞬间跳回left: 0%，完成首尾衔接。

改造为七图滑块的具体步骤 #

要实现7张图、每张展示30秒，我们需要重新计算容器尺寸和关键帧：

步骤1：调整容器尺寸 #

修改内部容器和单张图片的宽度，确保每张图全屏显示：

figure {
  width: 700%; /* 7张图 × 100% */
  position: absolute;
  left: 0;
  margin: 0;
  animation: slidy 217s infinite; /* 总时长计算见下文 */
}
figure img {
  width: 14.2857%; /* 100% / 7，确保每张图占满全屏 */
  float: left; /* 横向排列，避免堆叠 */
}

步骤2：计算总动画时长 #

假设切换时间保持快速过渡（1秒，避免卡顿）：

• 7张图的总展示时间：7 × 30 = 210秒
• 7次切换（含最后一张切回第一张）的总时间：7 × 1 = 7秒
• 总动画时长：210 + 7 = 217秒

步骤3：编写适配七图的关键帧 #

按照「30秒展示+1秒切换」的循环，我们可以用两种方式编写关键帧：

方式1：百分比版本（兼容性更好）

把总时长100%按比例分配，每个「展示+切换」单元占100%/7 ≈14.2857%，其中展示占单元的30/31≈96.77%，切换占1/31≈3.23%：

@keyframes slidy {
  /* 第1张图 */
  0% { left: 0%; }
  13.83% { left: 0%; } /* 展示30秒对应的百分比 */
  14.2857% { left: -100%; } /* 切换到第2张 */

  /* 第2张图 */
  28.1157% { left: -100%; }
  28.5714% { left: -200%; }

  /* 第3张图 */
  42.4014% { left: -200%; }
  42.8571% { left: -300%; }

  /* 第4张图 */
  56.6871% { left: -300%; }
  57.1428% { left: -400%; }

  /* 第5张图 */
  70.9728% { left: -400%; }
  71.4285% { left: -500%; }

  /* 第6张图 */
  85.2585% { left: -500%; }
  85.7142% { left: -600%; }

  /* 第7张图 */
  99.5042% { left: -600%; }
  100% { left: 0%; } /* 切换回第1张，完成循环 */
}

方式2：时间值版本（更直观）

直接用时间节点定义，不需要计算百分比：

@keyframes slidy {
  0s, 30s { left: 0%; }
  31s { left: -100%; }
  31s, 61s { left: -100%; }
  62s { left: -200%; }
  62s, 92s { left: -200%; }
  93s { left: -300%; }
  93s, 123s { left: -300%; }
  124s { left: -400%; }
  124s, 154s { left: -400%; }
  155s { left: -500%; }
  155s, 185s { left: -500%; }
  186s { left: -600%; }
  186s, 216s { left: -600%; }
  217s { left: 0%; }
}

步骤4：修复图片堆叠问题 #

你之前遇到的堆叠问题，大概率是以下原因：

• 内部图片容器宽度没设为700%，导致图片挤在一起
• 单张图片宽度没设为100%/7，或者没加float: left横向排列
• 关键帧位移值错误，比如切换时没移动到-(k-1)×100%的位置

确保以上三点都正确设置，就能解决堆叠问题。

额外优化建议 #

• 给动画添加animation-timing-function: ease-in-out;，让切换更平滑；切换阶段也可以单独用linear保持匀速位移
• 如果不想最后一张切回第一张时瞬间跳转，可以把动画设置为alternate方向，实现来回轮播
• 给外层容器添加height: 100vh;，确保滑块全屏高度

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