答案：通过CSS的animation和transform: translateX实现轮播图自动播放，利用flex布局让图片并排，结合@keyframes定义移动关键帧，设置无限循环动画，每8秒切换四张图，通过overflow隐藏超出部分，形成平滑过渡的轮播效果。
实现轮播图的自动播放，可以通过纯 CSS 的 animation 和 transform: translateX 来完成，无需 JavaScript。这种方式轻量、高效，适合静态页面或对性能要求较高的场景。
基本结构与原理
轮播图通常由一个外层容器和多个子项（图片或内容）组成。通过将所有子项水平排列在一行，并利用 translateX 水平移动整个内容行，实现“切换”效果。使用 @keyframes 定义动画，控制移动的位置和时间点。
示例 HTML 结构：
@@##@@ @@##@@ @@##@@ @@##@@
CSS 样式设置
关键在于让所有图片并排显示，超出容器的部分隐藏，并通过动画周期性地改变位置。
立即学习“前端免费学习笔记（深入）”；
核心 CSS 代码：
.carousel {
width: 100%;
overflow: hidden; /* 隐藏超出部分 */
white-space: nowrap; /* 防止换行 */
}
.carousel-track {
display: flex;
width: 400%; / 四张图总宽度为容器的400% /
animation: slide 8s infinite; / 每8秒循环一次 /
}
.carousel-track img {
width: 25%; / 每张图占容器宽度的25% /
height: auto;
flex-shrink: 0;
}
@keyframes slide {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-100%);
}
50% {
transform: translateX(-200%);
}
75% {
transform: translateX(-300%);
}
100% {
transform: translateX(0); / 回到起点，形成循环 /
}
}
动画细节说明
动画分为四个阶段，每张图停留2秒（共8秒），通过 translateX 向左移动整张图的宽度（100%、200% 等）来切换画面。
- 0% ~ 25%：显示第一张图
- 25% ~ 50%：显示第二张图
- 50% ~ 75%：显示第三张图
- 75% ~ 100%：显示第四张图
使用 infinite 实现无限循环，回到 0% 时无缝衔接。
优化与注意事项
为了让动画更自然，可以添加缓动函数，并避免跳变。
- 使用 ease-in-out 或 cubic-bezier 让过渡更平滑
- 确保图片尺寸一致，避免布局错乱
- 可配合伪元素或指示器增强用户体验（需额外样式）
- 移动端注意响应式，使用媒体查询调整宽度和动画时间
基本上就这些。利用 flex + translateX + keyframes 的组合，就能实现一个流畅的自动轮播图。不复杂但容易忽略细节，比如容器宽度和动画百分比的匹配。
