介绍一个性能飞快的移动端滑屏组件iSlider.js

islider功能介绍：

/**
* iSlider 高性能全屏滑动组件
* @class iSlider
* @param {object} opts
* @param {string} opts.wrap='.wrap' 容器
* @param {string} opts.item='.item'  滚动单元的元素
* @param {string} opts.playClass='play'  触发播放动画的class
* @param {number} [opts.index=0]  设置初始显示的页码
* @param {array} [opts.noslide=[]]  设置禁止滑动的页面序号(0开始), 禁止后 需要开发者手动绑定页面中的某个按钮事件进行滑动
* @param {number} [opts.speed=400] 动画速度 单位:ms
* @param {number} [opts.triggerDist=30] 触发滑动的手指移动最小位移 单位:像素
* @param {boolean} [opts.isVertical=true] 是否是垂直滑动 默认是.  设成false为水平滑动.
* @param {boolean} [opts.useACC=true] 是否启用硬件加速 默认启用
* @param {boolean} [opts.fullScr=true] 是否是全屏的 默认是. 如果是局部滑动,请设为false
* @param {boolean} [opts.preventMove=false] 是否阻止系统默认的touchmove移动事件,  默认不阻止, 该参数仅在局部滚动时有效,   如果是局部滚动 如果为true 那么在这个区域滑动的时候 将不会滚动页面.  如果是全屏情况 则会阻止
* @param {boolean} [opts.lastLocate=true] 后退后定位到上次浏览的位置 默认true
* @param {function} [opts.onslide]  滑动后回调函数  会回传index参数
* @param {array} [opts.loadingImgs]  loading需要加载的图片地址列表
* @param {function} [opts.onloading]  loading时每加载完成一个图片都会触发这个回调  回调时参数值为 (已加载个数,总数)
* @param {number} [opts.loadingOverTime=15]  预加载超时时间 单位:秒
* @desc

-  如丝般高性能全屏动画滑屏组件, 主要应用于微信H5宣传页,海报,推广介绍等场景. 基于iSlider,可以快速搭建效果炫丽的H5滑屏页面.
-  简洁,易用.  无css依赖.
-  专注于页面滑动, 没有冗余代码 , 保证性能.
-  组件没有任何依赖.
-  imgcache 引用地址 : http://imgcache.gtimg.cn/music/h5/lib/js/module/iSlider-1.0.min.js?_bid=363&max_age=2592000 -  github: https://github.com/kele527/iSlider 
* @example

//极简用法
new iSlider(); //容器默认是 .wrap  元素默认是 .item   动画播放class默认是 play

//普通用法
new iSlider({
wrap:'.wrap',
item:'.item',
playClass:'play',
onslide:function (index) {
console.info(index)
}
});

//带loading进度条用法
new iSlider({
wrap:'.wrap',
item:'.item',
playClass:'play',
onslide:function (index) {
console.info(index)
},
loadingImgs:[
'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/open_cover.jpg?max_age=2592000',
'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/im_cover.jpg?max_age=2592000',
'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/bg1.jpg?max_age=2592000',
'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/bg2.jpg?max_age=2592000'
],
onloading:function (loaded,total) {
this.$('#loading div').style.width=loaded/total*100+'%';
if (loaded==total) {
this.$('#loading').style.display="none"
}
}
});

demo http://kele527.github.io/iSlider/demo1.html 
*
*/

综上所述，iSlider集成了预加载、loding、滑屏等多功能组件库

实例参考：http://nextidea.qq.com/act/a20150610ideas/

iSlider.js：http://nextidea.qq.com/act/a20150610ideas/js/iSlider.js

感兴趣的朋友可以看看源码，研究一下这个库，分析优劣，加以改进，打包成自己的库。