Swiper之初识

何为Swiper？Swiper是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps)，主要是为了IOS而生的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的体验。Swiper的特征：1.触控运动，这个功能对于开发桌面网站会很有用。简单来说，就是因为Swiper能够让鼠标事件表现得像触屏事件。2.水平滑动(horizontal)\垂直滑动(vertical)\自由运动(无定位用于点击以及拖曳滑块)\ 旋转运动(能够无限循环)。3.滑动容器，该特征下Swiper能在一些简单的滑块区域里没有slides。4.任意标签，Swiper可以将任一HTML内容放在slide里，不只限于图像。5.如果移动设备支持的话，Swiper拥有硬件加速的功能，能够得到良好流畅的动画效果，尤其在IOS设备中得到更好的体现。6.丰富的API，Swiper支持丰富的API接口，可以实现更多的动画切换功能以及视觉效果。7.良好的兼容性，Swiper通用性的测试环境：移动端的Safari（iOS5下），Android 2.1+，windows Phone 8,以及谷歌浏览器（Chrome），Safari，火狐浏览器（Firefox），IE10+以及欧朋浏览器（Opera）等等。

Swiper的结构，我们用一张最直接了当的图来了解Swiper：

使用Swiper的时候我们一般都会引用Jquery文件，例如：

<script src="http://files.cnblogs.com/files/caidupingblogs/jquery-1.10.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  var mySwiper = $('.swiper-container').swiper({

    mode : 'vertical', //选择垂直模式，

    speed : 500, //设置动画持续时间500ms

    freeMode : true, //开启自由模式

    freeModeFluid : true, //开启'fluid'自由模式

    onTouchStart : function() {

      //触控滑块时执行代码

      alert('OMG you touch the slide!') 

    }

  }

})

</script>

返回拥有众多有用函数（functions）以及方法(methods)的对象:

mySwiper.disableMousewheelControl()-滑动中禁掉鼠标滑轮（mousewheel control）控制

mySwiper.enableMousewheelControl()-能够使用禁掉了的鼠标滑轮

mySwiper.enableKeyboardControl()-滑动中键盘控制可用

mySwiper.disableKeyboardControl()-禁用滑动中键盘控制

mySwiper.swipeNext()-执行过渡动画到下一滑块（slide）(简单来说就是滑动到下一个页面)

mySwiper.browser.ie10 - 返回 “true”如果浏览器为IE10

mySwiper.browser.is8 -返回 “true”如果浏览器为IE8

mySwiper.support.touch -返回 “true”如果浏览器支持触屏

mySwiper.support.transforms -返回 “true”如果浏览器支持css3 transforms(变形)

mySwiper.support.transforms3d -返回 “true”如果浏览器支持css3 3D transforms(变形)

mySwiper.support.transitions -返回 “true”如果浏览器支持css3 transitions(过渡)

mySwiper.activeIndex- 返回当前活动块的索引（number）

mySwiper.activeLoopIndex- 返回当前活动块在loop 模式下的索引（number）

mySwiper.activeLoaderIndex- 返回当前活动块在loader模式下的索引（number）

mySwiper.previousIndex- 返回上一个活动块的索引（number）

mySwiper.startAutoplay()-开始自动播放。应用于自定义“Play”和“Pause”按钮

mySwiper.stopAutoplay()-停止自动播放。应用于自定义“Play”和“Pause”按钮

mySwiper.resizeFix()-调用这个方法当你改变swiper's 的尺寸而没有改变窗口大小时。

mySwiper.reInit()- 重新初始化Swiper。对于动态添加/移除滑块非常有用。

mySwiper.width 返回Swiper容器的宽度

mySwiper.height返回Swiper容器的高度

mySwiper.isTouched 返回布尔值，当触控该slide时返回“true”

mySwiper.positions - 返回包含x,y坐标的wrapper对象

mySwiper.touches - 返回包含触控信息的对象数组

mySwiper.params - 获取对象初始化参数，能够在初始化之后改变/重写该参数，如：

mySwiper.params.speed = 500;mySwiper.setWrapperTranslate(x,y,z) - 手工设置css3 transform's translate 的值。x,y and z - 为数字