高速な性能のモバイル端末スライドモジュールiSlider.jsを紹介します.
3071 ワード
islider機能紹介:
実例参照:http://nextidea.qq.com/act/a20150610ideas/
iSlider.js:http://nextidea.qq.com/act/a20150610ideas/js/iSlider.js
興味がある友達はソースコードを見て、この倉庫を研究して、優劣を分析して、改善して、自分の倉庫に包装します.
/**
* 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
興味がある友達はソースコードを見て、この倉庫を研究して、優劣を分析して、改善して、自分の倉庫に包装します.