css3 - 纯css实现一个轮播图

这是我上一次的面试题、一晃两个月过去了。

从前都是拿原理骗人，把怎么实现的思路说出来。

我今天又被人问到了，才想起来真正码出来。码出来效果说明一切：

以上gif，只用到了5张图片，一个html+css，没有任何js。然后实现了自动轮播效果。

 

具体代码如下：
结构布局

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css实现轮播图</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="my-swiper">
    <ul class="swiper-list">
      <li class="swiper-slide swiper-slide1">
        <a href="javascript:;">
          <img src="./img/img01.jpg" alt="">
        </a>
      </li>
      <li class="swiper-slide swiper-slide2">
        <a href="javascript:;">
          <img src="./img/img02.jpg" alt="">
        </a>
      </li>
      <li class="swiper-slide swiper-slide3">
        <a href="javascript:;">
          <img src="./img/img03.jpg" alt="">
        </a>
      </li>
      <li class="swiper-slide swiper-slide4">
        <a href="javascript:;">
          <img src="./img/img04.png" alt="">
        </a>
      </li>
      <li class="swiper-slide swiper-slide5">
        <a href="javascript:;">
          <img src="./img/img05.gif" alt="">
        </a>
      </li>
    </ul>
    <div class="pagination">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot active"></span>
    </div>
  </div>
</body>
</html>
复制代码

除去普通布局样式后的 css核心代码:

.swiper-list {
  animation: swiper 10s steps(1, end) infinite;
}
/* 橙色小圆点 */
.dot.active {
  animation: swiper-dot 10s steps(1, end) infinite;
}

思路：

首先说五张图片轮播

 因为是五张图片左浮动展示。所以只需要左移ul的left值即可。借助animation的关键帧，每隔2秒切换一下left的位置。0%和100%关键帧时重合，

加上animation-iteration-count: infinite；实现循环播放。

 

其次说小圆点自动切换位置：
我的思路是，五个小白点。第六个是橙色点。同样借助animation关键帧，切换第六个橙色点的位置即可。

【赶工，制作比较粗糙，位置对的不太准。但是思路在这里。抛砖引玉，希望可以激发大家更多的实现想法。欢迎评论不足之处~】

 

源码地址：

https://github.com/xingorg1/jsStudy/tree/master/css实现轮播图

 

 

2019-04-17 21:10:07~

posted @   xing.org1^  阅读(26424)  评论(4)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
历史上的今天：
2017-04-17 案例 - 瀑布流效果学习笔记及源码整理（浮动式瀑布流）
点击右上角即可分享
微信分享提示