首页 > 文章 > 前端

CSS简单轮播图制作教程

时间：2025-11-16 14:58:48 492浏览收藏

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《CSS制作简单轮播图教程》，聊聊，希望可以帮助到正在努力赚钱的你。

轮播图通过HTML结构、CSS flex布局与transform动画实现自动切换。1. 用div容器和background-image构建三张图片；2. 轮播容器设为flex，宽度固定并隐藏溢出；3. 利用@keyframes定义分段translateX位移，每2秒切换一张图，6秒循环；4. 添加transition平滑效果和伪元素指示器提升视觉反馈。核心为CSS动画控制偏移，实现无缝轮播。

如何用css制作基本轮播图效果

实现一个基本的轮播图效果，可以用 HTML、CSS 和少量 JavaScript 配合完成。这里重点讲解如何用 CSS 控制结构和动画，让轮播图具备自动切换、平滑过渡的效果。

1. 基本 HTML 结构

轮播图通常包含一个容器，内部是多个图片项。使用无序列表或 div 容器都可以：

<div class="carousel">
  <div class="carousel-slide" style="background-image: url(image1.jpg);"></div>
  <div class="carousel-slide" style="background-image: url(image2.jpg);"></div>
  <div class="carousel-slide" style="background-image: url(image3.jpg);"></div>
</div>

2. 使用 CSS 设置布局与滚动行为

利用 flexbox 将所有图片水平排列，并设置容器只显示一张图的宽度，隐藏其余部分。

.carousel {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.carousel-slide {
  width: 600px;
  height: 400px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

给轮播容器添加 display: flex，使所有图片排成一行：

.carousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

3. 实现自动轮播动画

使用 CSS @keyframes 定义位移动画，每隔几秒切换一张图。

@keyframes slide {
  0% { transform: translateX(0); }
  25% { transform: translateX(0); }

  33.3% { transform: translateX(-600px); }
  58.3% { transform: translateX(-600px); }

  66.6% { transform: translateX(-1200px); }
  91.6% { transform: translateX(-1200px); }

  100% { transform: translateX(0); }
}

.carousel {
  animation: slide 6s infinite;
}

说明：假设每张图宽 600px，三张图总宽 1800px。动画分三段：

前 2 秒显示第一张（translateX(0)）
中间 2 秒显示第二张（translateX(-600px)）
后 2 秒显示第三张（translateX(-1200px)）
最后回到第一张，形成循环

4. 添加指示点或过渡优化

可以加一些视觉反馈，比如底部小圆点指示当前页：

.carousel::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 10px;
  background: rgba(0,0,0,0.5);
  border-radius: 5px;
}

也可以配合伪元素或额外标签做更精细的指示器，但核心轮播逻辑由 CSS 动画驱动即可。

基本上就这些。纯 CSS 轮播适合静态内容展示，若需更多交互（如手动滑动、暂停），再结合 JavaScript 控制 transform 值会更灵活。不复杂但容易忽略细节，比如动画时间分配和衔接。

终于介绍完啦！小伙伴们，这篇关于《CSS简单轮播图制作教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

CSS FLEXBOX 轮播图 transform @keyframes