纯CSS实现的幻灯片效果：查看demo；
实现思路
既然想实现动画效果，那么就需要用到CSS3中的@keyframes规则；
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
首先布局，HTML代码如下：
<div class="message">
<h2>如果IE浏览中效果显示有问题，请将你的浏览器升级或者换一个浏览器查看</h2>
</div>
<div class="content">
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
上面一个class为message的Div，用于给出提示，因为@keyframes规则 IE10 以下是不支持的，而class为content的div里面一个无序列表里包裹着四张图片，用于播放。
reset css代码和提示信息.message部分的代码，这部分没什么好说的
body,div,img,ul,li {
padding: 0;
margin: 0;
}
ul,li {
list-style: none;
}
.message {
text-align: center;
margin-top: 100px;
}
.message {
font-size: 15px;
color: #f30;
font-weight: blod;
}
给.content宽高，然后页面居中，超出部分隐藏，接下来给一个相对定位用于固定子元素，给一个圆角的边框，接着让.list固定定位，再然后写图片，设置大小，等同于视口大小，对齐方式是底部对齐
.content {
width: 600px;
margin: 0 auto;
height: 350px;
margin-top: 200px;
position: relative;
overflow: hidden;
border: 10px solid #ccc;
border-radius: 30px;
}
.content .list {
position: absolute;
}
.content .list img {
width: 600px;
height: 350px;
vertical-align: bottom;
}
好了，布局也完成了，接着将写好的@keyframes规则并绑定到元素，4张图片12s走完，3s切换一张图片，infinite循环执行。
@keyframes slides {
from, to {top: 0;}
12.5% {top: 0;}
25% {top: -350px;}
37.5% {top: -350px;}
50% {top: -700px;}
62.5% {top: -700px;}
75% {top: -1050px;}
87.5% {top: -1050px;}
}
.list {
animation: slides 12s infinite;
}
代码到这里就完成了，总结一下思路，首先布局，写一个容器，视口等同图片大小，超出内容隐藏，相对定位，接下来一个ul固定定位，里面的li存放图片，因为视口大小等于图片大小，所以一次只能看到一张图片，通过@keyframes规则让ul的top定位发生改变，从而展现不同的图片，从而达到幻灯片的效果。
