最近项目中有用到一个非常强大的组件idangerous.swiper.js的组件，这个组件能够实现幻灯片的播放效果，而且有各种3D效果，大家可以去试一下，效果很不错的说！

这是这个项目的api文档：http://www.idangero.us/sliders/swiper/api.php  

GitHub上的地址：https://github.com/nolimits4web/Swiper

具体使用方法（copy的Swiper官网的代码）：

首先在页面中引入css和js文件：

<link rel="stylesheet" href="http://www.mamicode.com/path_to_css/idangerous.swiper.css">
<script defer src="http://www.mamicode.com/path_to_js/idangerous.swiper-2.x.min.js"></script>

页面中需要的页面结构

<div class="swiper-container">  <div class="swiper-wrapper">      <!--First Slide-->      <div class="swiper-slide">         <!-- 这中间可以加入任意的页面代码 -->      </div>            <!--Second Slide-->      <div class="swiper-slide">        <!-- 这中间可以加入任意的页面代码 --> 
　　　 </div>
 
　　　 <!--Third Slide--> 
　　　 <div class="swiper-slide"> 
      <!-- 这中间可以加入任意的页面代码 --> 
      </div>
   </div> 
</div>
这是JS调用的示例：

<script type="text/javascript">

/*======Use document ready or window load eventsFor example:With jQuery: $(function() { ...code here... })Or window.onload = function() { ...code here ...}Or document.addEventListener(‘DOMContentLoaded‘, function(){ ...code here... }, false)=======*/window.onload = function() {  var mySwiper = new Swiper(‘.swiper-container‘,{    //Your options here:    mode:‘horizontal‘,    loop: true    //etc..  });  }/*Or with jQuery/Zepto*/$(function(){  var mySwiper = $(‘.swiper-container‘).swiper({    //Your options here:    mode:‘horizontal‘,    loop: true    //etc..  });})</script>

再者，这个组件的api的方法很多，可以设置的选项也有很多，我目前使用的比较少，然后对他的文档的阅读也不怎么深入，希望以后能够有时间仔细研究下这个组件的api。