Swipe JS
Swipe JS 是一个轻量级的移动滑动组件，支持 1:1 的触摸移动，阻力以及防滑性能都不错，可以让移动web应用展现更多的内容，能解决我们对于移动Web对滑动的需求。
官网：http://www.swipejs.com
github：https://github.com/bradbirdsall/Swipe
要实现Swipe的滑动和手势非常简单，仅需要遵循一个简单的规则。下面是一个例子：
<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
里面包裹的三个DIV即是滑动的模块了，在滑块结束后面或页面底部添加事件代码：
window.mySwipe = Swipe(document.getElementById('slider'));
当然添加了事件后我们还需要添加一些基础的样式，以保证滑块能正常工作：
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
到这里整个滑动效果就制作完成了，赶紧用手机进行测试下吧！
Swipe2.0还提供了更多的参数设置：
-
startSlide Integer (default:0) - index position Swipe should start at（滑动的索引值,即从*值开始滑动，默认值为0）
-
speed Integer (default:300) - speed of prev and next transitions in milliseconds.（滑动的速度，默认值300毫秒）
-
auto Integer - begin with auto slideshow (time in milliseconds between slides)（自动滑动，单位为毫秒）
-
continuous Boolean (default:true) - create an infinite feel with no endpoints（是否循环滑动，默认值为true）
-
disableScroll Boolean (default:false) - stop any touches on this container from scrolling the page（停止任何触及此容器上滚动页面，默认值flase）
-
stopPropagation Boolean (default:false) - stop event propagation（停止事件传播,默认值flase）
-
callback Function - runs at slide change.（回调函数）
-
transitionEnd Function - runs at the end slide transition.（滑动过渡时调用的函数）
举个带参数设置的栗子：
<script type="text/javascript">
window.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 2,
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
});
</script>
Swipe2.0提供的API
prev() slide to prev（上一页）
next() slide to next（下一页）
getPos() returns current slide index position（获取当前索引位置）
getNumSlides() returns the total amount of slides（获取所有滑块总数）
slide(index, duration) slide to set index position (duration: speed of transition in milliseconds)（指数，持续时间）滑动设置索引位置（持续时间：转型速度以毫秒为单位）
与1.0相比较，2.0做出了很多改进，有更多的API设定，相比各种WebApp开发框架，Swipe也有自己的优缺点，
优点：
滑动与防滑性能非常不错，用户体验较好
Html结构简单，自定义较灵活
缺点：
切换后盒子的高度取决于切换内容最大高度，如果某个盒子无内容，那么会出现一个空白区域
当前选中状态在滑动结束后才激活
混合开发时js代码较为繁琐
//demo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swipe JS</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="main.css">
<style>
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
-webkit-text-size-adjust:none;
font-family:sans-serif;
min-height:416px;
}
html, body {
background: #f3f3f3;
margin:0;padding:0;
overflow:hidden;
}
/* Swipe 2 required styles */
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
/* END required styles */
.pageNum{
text-align:center;
list-style:none;
margin:0;
padding:0
}
.pageNum li {
display:inline-block;
width:10px;
height:10px;
border-radius:10px;
background:#141414;
box-shadow:inset 0 1px 3px black,0 0 1px 1px #202020;
margin:0 2px;
cursor:pointer
}
.pageNum li.on {
box-shadow:inset 0 1px 3px -1px #28b4ea,0 1px 2px rgba(0,0,0,.5);
background-color:#1293dc;
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1293dc),color-stop(100%,#0f6297));
background-image:-webkit-linear-gradient(top,#1293dc,#0f6297);
background-image:-moz-linear-gradient(top,#1293dc,#0f6297);
background-image:-ms-linear-gradient(top,#1293dc,#0f6297);
background-image:-o-linear-gradient(top,#1293dc,#0f6297);
background-image:linear-gradient(top,#1293dc,#0f6297)
}
.pageNum-wrap{
position:absolute;
top:50%;
left:50%;
}
</style>
</head>
<body>
<div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
<div class='swipe-wrap'>
<div><img src="images/explorations1.jpg"></div>
<div><img src="images/explorations2.jpg"></div>
<div><img src="images/explorations3.jpg"></div>
<div><img src="images/fiftyandtwothirds3.jpg"></div>
</div>
</div>
<div class="pageNum-wrap">
<!--<button οnclick='mySwipe.prev()'>prev</button>-->
<ul class="pageNum" id="pagtionPos">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- <button οnclick='mySwipe.next()'>next</button>-->
</div>
<script src='swipe.js'></script>
<script>
// pure JS
var elem = document.getElementById('mySwipe');
var bullets = document.getElementById('pagtionPos').getElementsByTagName('li');
window.mySwipe = Swipe(elem, {
startSlide: 1,
// auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: true,
callback: function(index) {
var i = bullets.length;
while(i--){
bullets[i].className='';
}
bullets[index].className='on';
}
// transitionEnd: function(index, element) {}
});
// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');
</script>
</body>
</html>