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%E5%AE%9E%E7%8E%B0%E8%BD%AE%E6%92%AD%E5%9B%BE
2019-04-17 21:10:07~
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-04-17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读