分享的这个，是本站使用的一个最简单的纯CSS代码，具体效果看文章页侧栏那个自动播放的幻灯片就行了。

CSS代码部分：

#celanslider{width:100%;height:500px;position:relative;overflow:hidden;margin-left:5px;margin-bottom:20px;box-shadow:0px 0px 25px rgba(145, 145, 145, 1);border-radius:7px;border:5px solid #f7f7f7;}

#ceslider{width:100%;height:500px;position:relative;overflow:hidden;}

.ceslides{width:400%;height:100%;position:relative;-webkit-animation:ceslide 30s infinite;-moz-animation:ceslide 30s infinite;animation:ceslide 30s infinite;}

.ceslider{width:25%;height:100%;float:left;position:relative;z-index:1;overflow:hidden;}

.ceslide img{width:100%;height:100%;}

.ceslide img{width:100%;height:100%;}

.ceimage{width:100%;height:100%;}

.ceimage img{width:100%;height:100%;}

@-webkit-keyframes ceslide{0%,100%{margin-left:0%;}

21%{margin-left:0%;}

25%{margin-left:-100%;}

46%{margin-left:-100%;}

50%{margin-left:-200%;}

71%{margin-left:-200%;}

75%{margin-left:-300%;}

96%{margin-left:-300%;}}

@-moz-keyframes ceslide{0%,100%{margin-left:0%;}

21%{margin-left:0%;}

25%{margin-left:-100%;}

46%{margin-left:-100%;}

50%{margin-left:-200%;}

71%{margin-left:-200%;}

75%{margin-left:-300%;}

96%{margin-left:-300%;}}

@keyframes ceslide{0%,100%{margin-left:0%;}

21%{margin-left:0%;}

25%{margin-left:-100%;}

46%{margin-left:-100%;}

50%{margin-left:-200%;}

71%{margin-left:-200%;}

75%{margin-left:-300%;}

96%{margin-left:-300%;}}

html代码部分：

 <div id="celanslider">

  <div id="ceslider">

     <div class="ceslides">

       <div class="ceslider">

         <div class="ceimage">

  <a title="超级博客" href="链接" target="_blank" >

           <img src="图片链接"></a>

         </div>

       </div>

       <div class="ceslider">

         <div class="ceimage">

   <a title="超级博客" href="链接" target="_blank" >

           <img src="图片链接"></a>

         </div>

       </div>

       <div class="ceslider">

         <div class="ceimage">

   <a title="超级博客" href="链接" target="_blank" >

           <img src="图片链接"></a>

         </div>

       </div>

       <div class="ceslider">

         <div class="ceimage">

   <a title="超级博客" href="链接" target="_blank" >

           <img src="图片链接"></a>

         </div>

       </div>

     </div>

   </div>

        </div>