最完美的手机手势监控插件idangerous.swiper.js

此插件兼容IE7以上浏览器，之前也有介绍过类似的插件swipe.js，但是没idangerous.swiper.js好用，

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

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

1，

<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>

2，写入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');
 }
 }); 
});

http://www.jqcool.net/jquery-swiper.html

案例http://www.jqcool.net/demo/201412/jquery-swiper/

http://pan.baidu.com/s/1sjPt3kD

使用直接下载： http://pan.baidu.com/s/1i3hCxMH