jQuery插件Swiper 极其强大的移动端PC端滑块

Swiper是一款免费和超级轻量的适用于多种设备的的滑块幻灯片插件，可适用于移动网站，移动APP和移动本地APP，插件原为IOS设计，也可以在Android,Windows Phone 8和现代桌面浏览器上使用。

jquery实例：Swiper使用方法

引入核心文件，可以不需要jquery的，但jQ酷习惯了jquery，所以还是引入了。

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

写入html

<div class="swiper-container">
  <div class="swiper-wrapper">      <!--First Slide-->
      <div class="swiper-slide"> 
        <!--  这里写入你需要的任意html内容 -->
      </div>      
      <!--Second Slide-->
      <div class="swiper-slide">        
      <!-- Any HTML content of the second slide goes here -->
      </div>      
      <!--Third Slide-->
      <div class="swiper-slide"> 
        <!-- Any HTML content of the third slide goes here -->
      </div>      
      <!--Etc..-->
  </div>
</div>

打开 idangerous.swiper.css ，在文件最后修改Swiper's 的宽和高

/* Specify Swiper's Size: */
.swiper-container, .swiper-slide {
  width: 500px;
  height: 200px;
}

写入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)
  =======*/
  
  //无jquery
  window.onload = function() {
    var mySwiper = new Swiper('.swiper-container',{
      //Your options here:
      mode:'horizontal',
      loop: true
      //etc..
    });  
  }
   
  /*
  使用jquery
  */
  $(function(){
    var mySwiper = $('.swiper-container').swiper({
      //Your options here:
      mode:'horizontal',
      loop: true
      //etc..
    });
  })
</script>

函数

• mySwiper.disableMousewheelControl() – 关闭鼠标滚轮控制

• mySwiper.enableMousewheelControl() – 开启鼠标滚轮控制

• mySwiper.enableKeyboardControl() – 开启按键控制

• mySwiper.disableKeyboardControl() – 关闭按键控制

• mySwiper.swipeNext() – 变形到下一个slide

• mySwiper.swipePrev() – 变形到上一个slide

• mySwiper.swipeTo(index, speed, runCallbacks) – 跳转到index值的slide，speed为跳转的速度，runCallbacks为跳转后回调的涵数

• mySwiper.browser.ie10 – 如果是IE10返回true

• mySwiper.browser.ie8 – 如果是IE8返回true

• mySwiper.support.touch –如果支持触屏事件返回true

• mySwiper.support.transforms -如果支持CSS3变型返回true

• mySwiper.support.transforms3d – 如果支持CSS3 3D变型返回true

• mySwiper.support.transitions – 如果支持CSS3返回true

• mySwiper.activeSlide() – 返回当前slide的内容

• mySwiper.clickedSlideIndex – 返回单击或触摸后的slide的index值. 便于 "onSlideTouch" 和"onSlideClick" 调用

• mySwiper.clickedSlide – 返回单击或触摸后的slide的内容. 便于 "onSlideTouch" 和"onSlideClick" 调用.

• mySwiper.activeIndex – 返回当前slide的index值.

• mySwiper.activeLoopIndex – 在循环模式下返回当前slide的index值.

• mySwiper.activeLoaderIndex – 在加载模式下返回当前slide的index值.

• mySwiper.previousIndex – 返回上一个slide的index值.

• mySwiper.startAutoplay() – 开始自动播放.

• mySwiper.stopAutoplay() – 停止自动播放.

• mySwiper.destroy( removeResizeEvent ) – 将删除所有附加事件侦听器

• mySwiper.resizeFix() – 在slide改变大小窗口没有变时调用此函数.

• mySwiper.reInit() – 初始化 Swiper. 用于动态添加或删除 slides.

• mySwiper.width – 返回swiper容器的宽度

• mySwiper.height – 返回swiper容器的高度

• mySwiper.isTouched – 当触摸slide时返回true

• mySwiper.positions -返对对象容器的x轴与y轴值

• mySwiper.touches -返回对象的信息

• mySwiper.params – 访问对象与传递的参数初始化.初始化后你可以重定义参数, 像mySwiper.params.speed=500

• mySwiper.getWrapperTranslate(axis) – 返回对象容器的变形偏移量，像素为单位。 "translate"/offset (in px). "axis" – 为字符 "x"(横屏) 或 "y" (f直屏)

• mySwiper.setWrapperTranslate(x,y,z) -手动给对象容器设定CSS3的转换数值，单位为像素

• mySwiper.wrapperTransitionEnd(callback,permanent) – 自定义回调函数，在transitionEnd”事件后触发

$(document).ready(function(){
  var mySwiper = new Swiper('.swiper-container',{
    mode:'vertical',
    speed: 600,    onSlideChangeStart: function(swiper){
      alert('Hello 1');
    }
  });  
});

更多方法请参考官方文档。