如何使用纯css实现轮播图

最新推荐文章于 2025-06-30 10:55:23 发布

原创最新推荐文章于 2025-06-30 10:55:23 发布 · 2.8k 阅读

12 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

21 篇文章

订阅专栏

css笔记

21 篇文章

订阅专栏

本文详细介绍如何使用纯CSS实现轮播图效果，包括动画设置、图片自适应及焦点标识等，提供完整代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

知乎文章地址：https://zhuanlan.zhihu.com/p/48350702

轮播图一直是一个很有意思的东西，之前没有好好总结，导致一要写的时候就要重新开始思考过程然后编码，这是个特别烦的问题，今天就好好总结一下。

关于轮播器的一些demo，请看：

yaodebian/Carouselgithub.com

因为考虑到方法实在是太多了，这里就以css的实现方式来进行记录。yaodebian/Carousel因为考虑到方法实在是太多了，这里就以css的实现方式来进行记录。

首先来看一下示例吧：

接下来看实现的一个思路是怎样的吧。

首先来看一下主体的html代码：

  <section class="slider-container">
    <!-- 轮播器 -->
    <ul class="slider">
      <li class="slider-item slider-item1"></li>
      <li class="slider-item slider-item2"></li>
      <li class="slider-item slider-item3"></li>
      <li class="slider-item slider-item4"></li>
      <li class="slider-item slider-item5"></li>
    </ul>
  </section>

上面是slider是轮播器的容器，让我们再看一下相关的一些css样式：

* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

.slider-container {
  width: 50%;
  position: relative;
  margin: 0 auto;
}

.slider,
.slider-item {
  padding-bottom: 40%;
}

.slider-item {
  position: absolute;
  width: 100%;
  background-size: 100%;
}

.slider-item1 {
  background-image: url(imgs/1.jpg);
}

.slider-item2 {
  background-image: url(imgs/2.jpg);
}

.slider-item3 {
  background-image: url(imgs/3.jpg);
}

.slider-item4 {
  background-image: url(imgs/4.jpg);
}

.slider-item5 {
  background-image: url(imgs/5.jpg);
}

.slider-container充当容器并将其设置为relative以充当一个定位，为了图片能够自适应轮播器的宽度，我们将图片通过background-image来进行设置，同时设置background-size为100%。另外，设置图片的高度显然是不合理的，上面我们通过设置padding-bottom来显示图片相应高度的区域(利用背景在padding中也可以呈现)。

好了，准备到这里，我们接下来就需要通过css设置动画了，我们仅仅通过animation结合@keyframes就可以办到。我们先来看一张设计图：

因为css不能设置每两张的一个间隔时间，对于我们要应用的动画，我们将每一张图片都考虑进去。对于每一张图片，都会经历这样一个过程，我们假设图片1s内从透明过渡为不透明，然后保持显示状态3秒，然后再通过1s从不透明过渡为透明，这样，我们在上面的图片中进行了每张图片的一个动画推演，图片2在图片1开始隐藏时开始动画过程，图片3在图片2开始隐藏时开始动画过程，以此类推，最后发现轮播完全部5张图片时，总共需要花费20秒，也就是说，每张图片在完成一个动画过程后还需要等待15s才会重新执行该动画过程。

所以，我们的动画可以设置成这样：

@keyframes fade {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  25% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

对轮播图应用动画：

.slider-item {
  position: absolute;
  width: 100%;
  background-size: 100%;
  animation: fade 20s linear;
  animation-iteration-count: infinite;
}

对每个轮播图设置动画延迟：

.slider-item{
  opacity:0;
}
.slider-item1{
  animation-delay: -1s;
}
.slider-item2{
  animation-delay: 3s;
}
.slider-item3{
  animation-delay: 7s;
}
.slider-item4{
  animation-delay: 11s;
}
.slider-item5{
  animation-delay: 15s;
}

一开始大家都是透明的，另外因为一开始图片1当然是显示的，所以它的延迟为-1，即透明度一开始为1。

通过上面的设置就可以实现基本的轮播动画效果了。

最后，为了给轮播进行一个标识，就是我当前是轮播到第几张图片了，以及总共有多少张轮播图片，我们可以对轮播器添加焦点标识（原理和上面的轮播一样的啦）：

  <section class="slider-container">
    <!-- 轮播器 -->
    <ul class="slider">
      <li class="slider-item slider-item1"></li>
      <li class="slider-item slider-item2"></li>
      <li class="slider-item slider-item3"></li>
      <li class="slider-item slider-item4"></li>
      <li class="slider-item slider-item5"></li>
    </ul>
    <!-- 轮播焦点 -->
    <div class="focus-container">
      <ul class="floatfix">
        <li>
          <div class="focus-item focus-item1"></div>
        </li>
        <li>
          <div class="focus-item focus-item2"></div>
        </li>
        <li>
          <div class="focus-item focus-item3"></div>
        </li>
        <li>
          <div class="focus-item focus-item4"></div>
        </li>
        <li>
          <div class="focus-item focus-item5"></div>
        </li>
      </ul>
    </div>
  </section>

css样式：

.focus-container{
  position:absolute;
  bottom:2%;
  z-index:7;
  left:50%;
  margin-left: -45px;
}
.focus-container li{
  width:10px;
  height:10px;
  border-radius:50%;
  float:left;
  margin-right:10px;
  background:#fff;
}
.focus-item{
  width:100%;
  height:100%;
  opacity: 0;
  background:#51B1D9;
  border-radius:inherit;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-name:fade;
  animation-iteration-count: infinite;
}
.focus-item1{
  animation-delay: -1s;
}
.focus-item2{
  animation-delay: 3s;
}
.focus-item3{
  animation-delay: 7s;
}
.focus-item4{
  animation-delay: 11s;
}
.focus-item5{
  animation-delay: 15s;
}

最后，完整的代码详见：

https://github.com/yaodebian/Carousel/tree/master/%E7%BA%AFcss%E5%AE%9E%E7%8E%B0%E8%BD%AE%E6%92%AD%E6%95%88%E6%9E%9C/demo1github.com