轮播图效果，不再局限于JS制作！
HTML5学堂（码匠）：网页的轮播图一直都是个比较精美的制作，同时也是用户体验较佳的效果。在开发工程师进行制作的时候往往会选择使用JS来书写，由此不禁会问，难道真的只有使用JS才能制作轮播图吗？
本文主要内容
1. 效果展示
2. 主要涉及到的知识点
3. 基本实现思路
4. 案例实现
1. 效果展示
CSS3动画效果的强大不言而喻，自它出现一直是热度不减，毋庸置疑的是CSS3动画的出现在一定程度上降低了动画效果的实现难度。其精练的代码把我们从复杂的JS制作中解放出来，如下的轮播图效果即是纯CSS3制作的。
2. 主要涉及到的知识点
相比较来说，使用CSS3实现轮播图效果会比使用JS来的简单一些，只需要借助CSS3系列中的选择器、动画，再配合上相应的位置定位即可实现，下面来具体分析下需要用到的知识点。
2.1 定位position
position属性规定了元素的定位类型，即所有的元素都可以用position来进行定位。
position属性有五个取值，分别为：static、relative、absolute、fixed、inherit。其具体含义如下：
2.2 CSS3选择器
主要功能是用于选择标签，有如下几个常用的选择器。
选择器:nth-child(n)：选择器匹配属于其父元素的第n个子元素，不论元素的类型。
选择器E:last-child：匹配其父元素下的最后一个子元素。
选择器E:first-child：匹配其父元素下的第一个子元素。
如下是选择器E:first-child的书写形式：
.page em:first-child {
position: absolute;
left: 10px;
top: 21px;
background-color: #f60;
animation: runPage 15s linear 2s infinite;
}如上代码主要表示的是，选择到类名为page的标签中第一个em元素，然后为其设置样式。
2.3 CSS3动画
借助CSS3的animation来实现图片的轮播变化效果，配合上关键帧keyframe，让不同的变化时期发生图片位置的变化。其主要使用方式如下：
animation: runing 15s linear 2s infinite;上述代码中，属性的从左往右依次代表的是：动画的名称（由keyframe定义）、动画的时间、动画的速度曲线、动画的延迟时间、动画的播放次数（infinite表示无限循环）。
3. 基本实现思路
利用外层div仅仅是一张图片的大小，内层div包含若干张图片的方式，借助超出隐藏实现图片的排列，让视口div永远只有一张图片被展示；之后借助CSS3的动画，使用关键帧控制，变化图片的定位位置值，调整较佳的视觉效果，最终实现出纯CSS3制作的轮播图效果。
4. 案例实现
基本的HTML结构如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3轮播图效果</title>
<link rel="stylesheet" type="text/css" href="http://css.h5course.cn/reset.css" />
<style type="text/css"></style>
</head>
<body>
<!-- 效果的视口区 -->
<div class="pic-focus">
<!-- 图片内容区 -->
<ul>
<li><img src="http://img.h5course.cn/codepen/2016.12.28.1.png"></li>
<li><img src="http://img.h5course.cn/codepen/2016.12.28.2.jpg"></li>
<li><img src="http://img.h5course.cn/codepen/2016.12.28.1.png"></li>
<li><img src="http://img.h5course.cn/codepen/2016.12.28.4.jpg"></li>
<li><img src="http://img.h5course.cn/codepen/2016.12.28.5.jpg"></li>
</ul>
<!-- 底部进度提示 -->
<div class="page">
<em></em>
<em></em>
<em></em>
<em></em>
<em></em>
<em></em>
</div>
</div>
</body>
</html>相应的样式书写如下：
/*设置视口的大小样式*/
.pic-focus {
position: relative;
overflow: hidden;
width: 480px;
height: 320px;
margin: 100px auto 0;
border: 1px solid red;
}
/*设置内容区的样式*/
.pic-focus ul {
position: relative;
width: 2400px;
animation: runing 15s linear 2s infinite;
}
.pic-focus ul li {
overflow: hidden;
float: left;
width: 480px;
height: 320px;
}
.pic-focus ul li img {
float: left;
display: block;
width: 100%;
height: 100%;
}
.pic-focus .page {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -135px;
padding: 10px;
}
.pic-focus .page em {
display: inline-block;
width: 30px;
height: 6px;
margin: 0 10px;
background-color: #ccc;
border-radius: 3px;
}
/*对提示的进度单独设置样式*/
.pic-focus .page em:first-child {
position: absolute;
left: 10px;
top: 21px;
background-color: #f60;
animation: runPage 15s linear 2s infinite;
}
/*图片轮播效果的关键帧控制*/
@keyframes runing {
0%{left:0;}
5%{left:-480px;}
20%{left:-480px;}
25%{left:-960px;}
40%{left:-960px;}
45%{left:-1440px;}
60%{left:-1440px;}
65%{left:-1920px;}
80%{left:-1920px;}
85%{left:0;}
100%{left:0;}
}
/*随着图片切换，底部进度变化的关键帧控制*/
@keyframes runPage {
0%{left:10px;}
5%{left:65px;}
20%{left:65px;}
25%{left:119px;}
40%{left:119px;}
45%{left:174px;}
60%{left:174px;}
65%{left:229px;}
80%{left:229px;}
85%{left:10px;}
100%{left:10px;}
}总结
此轮播图效果是使用定位的方式，结合CSS3的选择器、动画来进行实现的。让开发者能够不必考虑逻辑性复杂的JS代码，为效果层面的开发减少了难度。
最后，这种CSS3实现的轮播图，缺点也是不言而喻的。因为点击轮换和自动轮换两者只能选其一，只不过自动轮换可以大量的使用在移动端开发，算是一个不错的选择。
腾讯云开发者
