纯CSS实现轮播图

各位小伙伴们，今天我们来学习一下轮播图。轮播图是我们写网页当中经常出现的一个效果，基本上各个网站上都会有这个效果。那么一提到轮播图大家脑子里的第一反应是不是用js来实现呀。

那今天这篇文章呢我们就不按常理出牌，不用js来写轮播图，而是利用纯css实现轮播图，听起来是不是很厉害的样子，纯css竟然能写出轮播图的效果，那么到底应该怎么写呢？接下来废话不多说，上代码。

最后实现的效果：

html代码

<!-- slide是轮播图区域 -->
<div class="slide">
  <!--  swiper里面放的是图片-->
  <ul class="swiper">
    <li><img src="img/1.jpg" alt="" /></li>
    <li><img src="img/2.jpg" alt="" /></li>
    <li><img src="img/3.jpg" alt="" /></li>
    <li><img src="img/4.jpg" alt="" /></li>
    <li><img src="img/1.jpg" alt="" /></li>
  </ul>
  <!-- 这里是轮播图上的小圆点 -->
  <div class="circle">
    <div class="active"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

注意点：

第一点：要想实现无缝衔接，ul里面放的第一张图和最后一张图要一致。千万不要写错哦 ，可以看到我的第一个li里面放的是1.jpg，最后一个li也是1.jpg。

第二点：带有类名active的是激活之后的实心白点。没有带类名的就是默认的空心圆。总共有4张图轮播，所有创建了4个空心圆，当播放到第一张图的时候就把实心圆移动到第一个空心圆的位置，依次类推。

css代码：

.slide {
	/* 写相对定位是因为一会轮播图上的小圆点需要做绝对定位 */
	position: relative;
	/* 让轮播图在页面中居中 */
	margin: auto;
	/* 宽度和高度就是一张图的宽和高 */
	width: 300px;
	height: 200px;
	/* 只显示一张图，其他超出盒子的图片先隐藏掉 */
	overflow: hidden;
}

ul {
	list-style: none;
	/* 宽度尽量写大，确保能放下所有的图片 */
	width: 9999px;
	/* 控制ul开始做位置移动（利用css动画特性来实现===核心代码） */
	animation: swiperRun 10s infinite 2s running;
}

li {
	width: 300px;
	height: 200px;
	float: left;
}

img {
	width: 100%;
	height: 100%;
}

.circle {
	width: 100px;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	bottom: 10px;
}

.circle div {
	box-sizing: border-box;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid white;
	float: left;
	margin: 0 5px;
}
/* 鼠标滑过暂停播放 */
.slide:hover ul,.slide:hover .active {
	animation-play-state: paused;
	cursor: pointer;
}

.circle .active {
	opacity: 1;
	transform: translateX(20px);
	background-color: #FFF;
	animation: circleRun 10s infinite 2s running;
}

创建动画让图片和白点都动起来（这里是核心代码）

/* 让图片动起来的动画 */
@keyframes swiperRun {
	/* 第一张 */
	0% {
		transform: translateX(0px);
	}
	/* 第二张 */
	5% {
		transform: translateX(-300px);
	}

	25% {
		transform: translateX(-300px);
	}
	/* 第三张 */
	30% {
		transform: translateX(-600px);
	}

	50% {
		transform: translateX(-600px);
	}
	/* 第四张 */
	55% {
		transform: translateX(-900px);
	}

	75% {
		transform: translateX(-900px);
	}
	/* 第五张 */
	80% {
		transform: translateX(-1200px);
	}

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

让白色实心圆点动起来的动画：

@keyframes circleRun {
	/* 第一个点 */
	0% {
		transform: translateX(20px);
		opacity: 1;
	}
	/* 第二个点 */
	5% {
		transform: translateX(40px);
		opacity: 1;
	}

	25% {
		transform: translateX(40px);
		opacity: 1;
	}
	/* 第三个点 */
	30% {
		transform: translateX(60px);
		opacity: 1;
	}

	50% {
		transform: translateX(60px);
		opacity: 1;
	}
	/* 第四个点 */
	55% {
		transform: translateX(80px);
		opacity: 1;
	}

	75% {
		transform: translateX(80px);
		opacity: 1;
	}

	77% {
		transform: translateX(19px);
		opacity: 0;
	}
	/* 第五个点  移出去 */
	80% {
		transform: translateX(20px);
		opacity: 1;
	}

	100% {
		transform: translateX(20px);
		opacity: 1;
	}
}