Swiper的简单实用方法

标签：style   http   java   使用   strong   文件   

最近项目中有用到一个非常强大的组件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="path_to_css/idangerous.swiper.css">
<script defer src="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 events
For 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。

Swiper的简单实用方法,布布扣,bubuko.com

Swiper的简单实用方法

标签：style   http   java   使用   strong   文件   

原文地址：http://www.cnblogs.com/xyhy/p/3818931.html