2019独角兽企业重金招聘Python工程师标准>>> 
总结下图片轮播功能，之前用js写过图片轮播功能，主要分以下几个方向实现：
1、改变图片位置，这是最常见的实现方式之一。图片的定位方式用position：absolute/relative,图片不叠加。
2、改变图片的透明度,图片的定位方式用position：absolute，图片叠加。
今天突然想到用css3动画实现下图片轮播功能，虽然已经是老掉牙的问题了，如下：
结构：
<div class="luoboOut">
<ul>
<li class="red"></li>
<li class="blue"></li>
<li class="green"></li>
</ul>
</div>
样式：
先定位：
.luoboOut{
width:500px;
height:300px;
margin:auto;
background-color:#ccc;
overflow: hidden;
}
.luoboOut ul{
height:100%;
position: relative;
}
.luoboOut ul li{ //定义元素定位状态（因为是水平轮播，所以三个图片在一个水平线上）
//也可以用float，父元素width为三个元素width相加
width:100%;
height:100%;
position:absolute;
}
.red{
background-color: red;
animation:myfirst 10s infinite; // 引用动画，定义时间、循环
}
.blue{
background-color: blue;
animation:mysecond 10s infinite;
}
.green{
background-color: green;
animation:mythird 10s infinite;
}
//为每个元素定义动画，因为有三个图片，所以每个图片有三个状态（也就是三个位置）
@keyframes myfirst
{
0% {left:0px; top:0px;}
20% {left:0px; top:0px;}
40% {left:-500px; top:0px;}
60% {left:-500px; top:0px;}
80% {left:-1000px; top:0px;}
100% {left:-1000px; top:0px;}
}
@keyframes mysecond
{
0% {left:500px; top:0px;}
20% {left:500px; top:0px;}
40% {left:0px; top:0px;}
60% {left:0px; top:0px;}
80% {left:-500px; top:0px;}
100% {left:-500px; top:0px;}
}
@keyframes mythird
{
0% {left:1000px; top:0px;}
20% {left:1000px; top:0px;}
40% {left:500px; top:0px;}
60% {left:500px; top:0px;}
80% {left:0px; top:0px;}
100% {left:0px; top:0px;}
}