css—轮播图实现

news2025/1/15 10:35:35

一、背景

最近和朋友在一起讨论的时候，我们提出了这样的一个提问，难道轮播图的效果只能通过js来实现吗？经过我们的一系列的争论，发现了这是可以通过纯css来实现这一效果的，CSS轮播图也是一种常见的网页展示方式，可以通过CSS样式来实现图片的切换效果。它不依赖于JavaScript，运行速度较快，并且具有较好的兼容性。那么今天一如既往的来一起来探讨一下如何去实现这一效果。

二、思路解析

这个效果并不是想想中的那么难，在这里我们需要使用到的有css中的属性也有css3中的属性，如果来阅读的小伙伴没有接触css3，也不用急，我会在接下来的一篇文章中详细介绍一下，这里使用到的css3的属性。

思路：

大家应该知道在很早之前的胶片电影的播放形式，我们这里的一个录播效果和胶片电影的思路是大同小异的，那么究竟是什么呢。

1、首先我们需要创建一个让用户观看轮播图的视口，也就是我们可以看到的部分；

2、既然有可以看到的部分，那就一定有不可以让用户看到的部分，所以超出的部分怎么办呢？这里我不做解释，留些思考的空间你们来想一下呢。

3、那么如何让这些图片动起来呢，这里就用到了css3中的属性，那就是动画属性，之后我会进行解释。

这就是基本的实现思路了。话不多说，直接进入代码实现阶段。

三、拆解分析阶段

注意：接下来的代码结构为了更好的让小伙伴们串联起来，所以采用了代码迭代的方式来讲解，在最后会添加代码的总体结构和css样式。

第一步我们就来创建我们的视口部分，在这里我们使用了div.wrap_out作为视口展示。

<div class="wrap_out"></div>

.wrap_out {
        width: 500px;
        height: 300px;
        margin: 300px auto;
        border: 2px solid #f00;
      }

第二步我们需要来创建存放我们所有需要展示的内容的容器，这里我们使用ul来充当这一个容器，在这里我们展示5张图片，所以这里我们需要给ul这个容器设置宽为25oopx，高度和视口高度一致。

<div class="wrap_out">
        <ul class="wrap"></ul>
      </div>

  .wrap {
        width: 2500px;
        height: 300px;
      }

第三步，我们来创建存放每个内容的盒子，这里由于我们使用的是ul来融合这一部分，所以我们只要使用li来定义存放内容的盒子就可以。在这里我不使用图片讲解，我就直接使用不同的文字进行区分。

<div class="wrap_out">
        <ul class="wrap">
          <li>FIRST</li>
          <li>SECOND</li>
          <li>THIRD</li>
          <li>FOURTH</li>
          <li>FIFTH</li>
        </ul>
      </div>

.wrap > li {
        width: 500px;
        height: 300px;
        background-color: #f90;
      }

如果只这样写，那是肯定无法实现最终需要的效果的，所以现在我们需要让所有的盒子横向排列成一行，以方便之后的移动。只需要在之前的ul中更新为以下代码

   .wrap {
        width: 2500px;
        height: 300px;
        display: flex;
      }

增加完之后就会发现已经成为了我们初步想要实现的结果。

接下来就是把超出红色边框视口的部分隐藏。如下图：

      .wrap_out {
        width: 500px;
        height: 300px;
        margin: 300px auto;
        border: 2px solid #f00;
        overflow: hidden;
      }

现在我们视口中只能看到第一张图，其他的图片都在第一张的后边，那么接下来就不难想到了，只要让ul这个大盒子自己无限次的移动就可以了。

所以接下来我们需要来定制动画的规则，让他们动起来。

@keyframes wrap_animation {
        0% {
          transform: translate(0);
        }
        10% {
          transform: translate(0);
        }
        25% {
          transform: translate(-500px);
        }
        35% {
          transform: translate(-500px);
        }
        50% {
          transform: translate(-1000px);
        }
        60% {
          transform: translate(-1000px);
        }
        75% {
          transform: translate(-1500px);
        }
        85% {
          transform: translate(-1500px);
        }
        90% {
          transform: translate(-2000px);
        }
        100% {
          transform: translate(-2000px);
        }
      }

然后我们需要在需要设置动画的元素中引用我们已经定制好的规则。

.wrap {
        width: 2500px;
        height: 300px;
        display: flex;
        animation: wrap_animation 10s infinite linear;
      }

注意：这里需要注意不要将动画添加错元素

添加好之后就会发现静态的页面动起来了

但是会发现一个问题，就是在最后一张图之后会有一个白色的置空区域，那么如何解决呢，又是因为什么呢？

有空白的原因是应为我们的 transform: translate（）属性是以左边边框为基准点进行平移的，所以当我们移动到-2500px的时候就刚好会漏出那张白色的空白区域，所以我们只需要在最后添加一张和第一张图一样的区域，就可以实现轮播效果。

<ul class="wrap">
          <li style="background-color: #f00">FIRST</li>
          <li style="background-color: #0f0">SECOND</li>
          <li style="background-color: #00f">THIRD</li>
          <li style="background-color: pink">FOURTH</li>
          <li style="background-color: purple">FIFTH</li>
          <li style="background-color: #f00">FIRST</li>
        </ul>

这样我们的轮播图效果就完成了。

四、代码总览

1、html部分

<body>
    <div class="box">
      <div class="wrap_out">
        <ul class="wrap">
          <li style="background-color: #f00">FIRST</li>
          <li style="background-color: #0f0">SECOND</li>
          <li style="background-color: #00f">THIRD</li>
          <li style="background-color: pink">FOURTH</li>
          <li style="background-color: purple">FIFTH</li>
          <li style="background-color: #f00">FIRST</li>
        </ul>
      </div>
    </div>
  </body>

2、CSS部分

<style>
      * {
        margin: 0;
        padding: 0;
      }
      html {
        /* overflow-x: hidden; */
      }
      ul {
        list-style: none;
      }
      .box {
        width: 100vw;
        height: 100vh;
        display: flex;
      }
      .wrap_out {
        width: 500px;
        height: 300px;
        margin: 300px auto;
        border: 2px solid #f00;
        overflow: hidden;
      }
      .wrap {
        width: 3000px;
        height: 300px;
        display: flex;
        animation: wrap_animation 10s infinite linear;
      }
      .wrap > li {
        width: 500px;
        height: 300px;
      }
      @keyframes wrap_animation {
        0% {
          transform: translate(0);
        }
        10% {
          transform: translate(0);
        }
        25% {
          transform: translate(-500px);
        }
        35% {
          transform: translate(-500px);
        }
        50% {
          transform: translate(-1000px);
        }
        60% {
          transform: translate(-1000px);
        }
        75% {
          transform: translate(-1500px);
        }
        85% {
          transform: translate(-1500px);
        }
        90% {
          transform: translate(-2000px);
        }
        100% {
          transform: translate(-2000px);
        }
      }
    </style>

五、结语

感谢大家的耐心阅读，希望这篇文章能给您带来一些启发和帮助。如果您有任何疑问或建议，请随时在评论区留言，我会尽快回复。今天的分享就到这里了，如果您觉得这篇文章还不错，请点赞、分享给更多的朋友吧！同时，也欢迎关注我的博客，获取更多精彩内容。

补充： css动画可以看这个文章，同样也是我整理的一些动画知识。

css—动画-CSDN博客本文主要讲解动画的基本使用。定义动画规则以及一些动画属性的使用。https://blog.csdn.net/m0_64387122/article/details/144066216?sharetype=blogdetail&sharerId=144066216&sharerefer=PC&sharesource=m0_64387122&spm=1011.2480.3001.8118