媒介
近来须要开辟一个新的“微信运动平台”，手机端主页须要用到一个幻灯片。由于好一段时间没有悉数手写挪动端页面了，遂又从新找了一个下有没有什么好的幻灯片插件，毕竟反复造轮子没有必要啊。
综合比较后发明，Swipe 这款插件照样比较不错的，所以这里专程写一篇文章以像人人引荐，而且作为纪录，轻易下次检察。
简介
Swipe 是一个轻量级的挪动滑动组件，这点从文件大小不难看出。它支撑 1:1 的触摸挪动，阻力以及防滑。纯真从挪动端来运用，应当满足基本的需求了。
申明
从github下载后，能够发明，统共就8个文件，个中能够真正项目顶用获得的，也基本就是1个 swipe.js 文件。index.html 和 style.css 自身是作为演示存在的，有兴致的能够研究一下。
那末我们详细假如运用它呢？很简朴，基本只需以下代码即可：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>演示</title>
<!-- 起首引入JQuery -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 引入中心swipe.js文件 -->
<script src="swipe.js"></script>
<!-- 幻灯片基本款式 -->
<style>
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
font-size:140px; /* 这里款式是为了演示轻易，我特地加的 */
}
</style>
</head>
<body>
<!-- 幻灯片实例代买，前两层是外围容器 -->
<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<!-- 这三个是幻灯片内容，个中1，2,3等数字可换成图片，款式依据需求变动即可 -->
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<!-- 页面幻灯片运转剧本（初始化） -->
<script>
window.mySwipe = Swipe(document.getElementById('slider'));
</script>
</body>
</html>以上代码运转结果：
经由过程鼠标点击或许放到手机上手指滑动，就能够瞥见幻灯片的运转结果了。固然，当前只是最基本的，悉数都是默许设置。我们完全能够经由过程下面供应的参数，连系本身的需求，自义定出更好的结果来。
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.（滑动过渡时挪用的函数）下面就是官方给的演示例子：
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) {}
});从中我们不难看出详细参数的运用要领和位置。这一个假如感兴致，能够依据须要，本身到场参数尝尝，都是以json对象存在于Swipe的第二个参数的。
那末除了以上参数，Swipe还供应了一些经常使用的要领（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)（指数，持续时间）滑动设置索引位置（持续时间：转型速率以毫秒为单元）都是一些简朴的接口要领，你能够Js挪用他们以到达你想要的结果。
