纯CSS实现的幻灯片效果：查看demo；

实现思路

既然想实现动画效果，那么就需要用到CSS3中的@keyframes规则；
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
首先布局，HTML代码如下：

  <div class="message">
    <h2>如果IE浏览中效果显示有问题，请将你的浏览器升级或者换一个浏览器查看</h2>  
  </div>
  <div class="content">
    <ul class="list">
      <li>![pic](http://upload-images.jianshu.io/upload_images/7843051-42ebcd917e44d7c6?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
      <li>![pic](http://upload-images.jianshu.io/upload_images/7843051-ebc3486f724110da?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
      <li>![pic](http://upload-images.jianshu.io/upload_images/7843051-9198d284fe6619ef?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>
      <li>![pic](http://upload-images.jianshu.io/upload_images/7843051-26de736e352c87ce?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</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定位发生改变，从而展现不同的图片，从而达到幻灯片的效果。