答案：使用CSS动画与flex布局可实现无JavaScript的自动轮播图。通过设置外层容器溢出隐藏，flex排列多张图片为一行，利用@keyframes定义分段位移动画，使图片依次切换，每张图停留指定时间，配合animation属性实现无限循环播放，并可通过:hover暂停动画提升交互体验。
制作一个简易轮播图不需要JavaScript，仅用CSS就能实现自动播放的视觉效果。核心思路是结合CSS动画与flex布局，通过控制图片的横向位移来完成轮播切换。
1. HTML结构搭建
轮播图的基础结构由一个外层容器和多个图片项组成。使用ul和li组织图片更语义化。
<div class="carousel">
<ul class="carousel-list">
<li class="carousel-item"><img src="image1.jpg" alt="图1"></li>
<li class="carousel-item"><img src="image2.jpg" alt="图2"></li>
<li class="carousel-item"><img src="image3.jpg" alt="图3"></li>
</ul>
</div>
2. 使用Flex布局排列图片
让所有图片水平排列在一行，并隐藏溢出部分，只显示一张图。
.carousel {
width: 600px;
height: 400px;
overflow: hidden;
margin: 50px auto;
border: 2px solid #ddd;
position: relative;
}
<p>.carousel-list {
display: flex;
width: 300%; /<em> 三张图总宽度 </em>/
list-style: none;
padding: 0;
margin: 0;
}</p><p>.carousel-item {
width: 33.333%;
height: 400px;
}</p><p>.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
3. 添加CSS动画实现自动轮播
通过@keyframes定义动画，让ul向左移动，从而展示下一张图。
立即学习“前端免费学习笔记（深入）”；
@keyframes slide {
0% { transform: translateX(0); }
33.33% { transform: translateX(0); }
<p>33.34% { transform: translateX(-100%); }
66.66% { transform: translateX(-100%); }</p><p>66.67% { transform: translateX(-200%); }
100% { transform: translateX(-200%); }
}</p><p>.carousel-list {
animation: slide 6s infinite ease-in-out;
}
动画分三段：每张图停留2秒，切换瞬间完成。百分比对应三张图的时间分配。
4. 可选优化：添加指示点或暂停效果
可以加入小圆点提示当前图片位置，或鼠标悬停时暂停轮播。
.carousel:hover .carousel-list {
animation-play-state: paused;
}
这样用户交互时动画会暂停，提升体验。
基本上就这些。利用flex布局排列图片，配合关键帧动画控制位移，就能做出一个轻量、无需JS的自动轮播图。不复杂但容易忽略细节，比如动画时间分配和容器尺寸控制。
