思路：下图是一张图片布局 重要通过float 属性将li并排排列 通过改变ul 的marginleft 值实现图片轮播
1、css实现
这个比较简单主要是将所有用到的图片连在一起，通过改变背景的位置改变图片
主要用到了animation
不过这个比较局限性，适合于初学者来增加信息，之后你会发现 这样的背景图片完全达不到你想要的效果，包括在图片下方添加文字、标签、按钮等，无法动态变化，除非你将这些全部放在了图片里 ，意思是每一张图片所要显示的内容都已经很好地存在于图片内，这样就不用动态的获取图片信息了。这样就需要花更多的时间在修图上了，像我这样的修图小白，还是老老实实用js或者jquery来实现吧，之后会更新这部分内容的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS实现轮播</title>
<style>
@keyframes slider {
0% { background-position: 0 0; } 5% { background-position: 0 0; }
20%{background-position: -840px 0} 25%{background-position: -840px 0}
50%{background-position: -1680px 0} 55%{background-position: -1680px 0}
80%{background-position: -840px 0} 85%{background-position: -840px 0}
100%{ background-position: 0 0;}
}
@-moz-keyframes slider {
0% { background-position: 0 0; }5% { background-position: 0 0; }
20%{background-position: -840px 0} 25%{background-position: -840px 0}
50%{background-position: -1680px 0} 55%{background-position: -1680px 0}
80%{background-position: -840px 0} 85%{background-position: -840px 0}
100%{ background-position: 0 0;}
}
@-ms-keyframes slider {
0% { background-position: 0 0; }5% { background-position: 0 0; }
20%{background-position: -840px 0} 25%{background-position: -840px 0}
50%{background-position: -1680px 0} 55%{background-position: -1680px 0}
80%{background-position: -840px 0} 85%{background-position: -840px 0}
100%{ background-position: 0 0;}
}
@-o-keyframes slider {
0% { background-position: 0 0; }5% { background-position: 0 0; }
20%{background-position: -840px 0} 25%{background-position: -840px 0}
50%{background-position: -1680px 0} 55%{background-position: -1680px 0}
80%{background-position: -840px 0} 85%{background-position: -840px 0}
100%{ background-position: 0 0;}
}
@-webkit-keyframes slider {
0% { background-position: 0 0; }5% { background-position: 0 0; }
20%{background-position: -840px 0} 25%{background-position: -840px 0}
50%{background-position: -1680px 0} 55%{background-position: -1680px 0}
80%{background-position: -840px 0} 85%{background-position: -840px 0}
100%{ background-position: 0 0;}
}
.box{
background: url("4.jpg") no-repeat 0 0;
width: 842px;height: 600px;
animation: slider 16s linear infinite;
margin: 100px 100px;
position: relative;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
webkit-animation:
-webkit-animation: name duration timing-function delay iteration_count direction;
包括以下几个属性
（1） -webkit-animation-name 这个属性的使用必须结合@-webkit-keyframes一起使用
eg: @-webkit-keyframes fontchange{
0%{font-size:10px;}
30%{font-size:15px;}
100%{font-siez:12px;}
}
百分比的意思就是duration的百分比，如果没有设置duration的话，则表示为无穷大
div{ -webkit-animation-name:fontchange;}
（2）-webkit-animation-duration 表示动画持续的时间
（3）-webkit-animation-timing-function 表示动画使用的时间曲线
【语法】： -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out
（4）-webkit-animation-delay 表示开始动画之前的延时
【语法】 -webkit-animation-delay: delay_time;
（5）-webkit-animation-iteration-count 表示动画要重复几次
【语法】-webkit-animation-iteration-count: times_number;
（6） -webkit-animation-direction 表示动画的方向
【语法】-webkit-animation-direction: normal(默认) | alternate
normal 方向始终向前
alternate 当重复次数为偶数时方向向前，奇数时方向相反
【另外】跟animation有关的其他属性
（1）-webkit-animation-fill-mode : none (默认)| backwards | forwards | both 设置动画开始之前和结束之后的行为（测试结
果不是很清晰）
（2）-webkit-animation-play-state: running（默认） | paused 设置动画的运行状态
2.jq实现
我的代码只能说是简单的实现了轮播的方式 ，之后会再去优化代码 包括css 下面的css只是简单用了重要的属性设置，其他用于使页面更美好的属性统统没有设置，毕竟我现在的目的是实现轮播，方便读者更快的看懂 多余的修饰性代码我就没有码上去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播</title>
<!--思路使用marginleft实现轮播
ul li 放置图片
-->
<style>
.slider{width: 990px;height: 380px;overflow: hidden}/*最外层宽度 可变化 如果需要添加其他栏*/
.slider ul{width: 1000px;height: 380px;}/*图片所处表格宽度*/
.slider ul li{float: left;list-style: none;margin: 0px 40px}/*左浮动 清除表格样式 margin一定要设置*/
</style>
</head>
<body>
<div class="slider">
<ul >
<li>
<a href="#" target="_blank"><img src="2.1.png" title="" name="oo" alt="那些让人失控的烘焙甜品"> </a>
</li>
<li>
<a href="#" target="_blank"><img src="2.2.png" title="oo" name="oo" alt="妈妈的爱心早餐表"> </a>
</li>
<li>
<a href="#" target="_blank"><img src="2.3.png" title="oo" name="oo" alt="春季必吃的滋补食物"> </a>
</li>
<li>
<a href="#" target="_blank"><img src="2.4.png" title="oo" name="oo" alt="十里桃花 灼灼芳华"> </a>
</li>
<li>
<a href="#" target="_blank"><img src="2.5.png" title="oo" name="oo" alt="食物挂起海洋风"> </a>
</li>
<li>
<a href="#" target="_blank"><img src="2.6.png" title="oo" name="oo" alt="信手拈来的排毒好物"> </a>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function () {
var ul = $(".slider ul"),
li = ul.find('li'),
len = $(".slider li").length,
liW = li.outerWidth(true),
index = 0;
ul.css({"width":liW*(len+1),'margin-left':liW*index});
function play() {
li.first().eq(index).clone().appendTo(ul);
ul.css({"margin-left":-liW*index});
index++;
if(index>len){
index =0;ul.css({"margin-left":liW*index});
index++;
}
}
ul.hover(function () {
clearInterval(play());
},setInterval(play,1500))
})
</script>
</html>