├── eo.png ├── README.md ├── demo5.html ├── LICENSE ├── demo1.html ├── demo2.html ├── demo3.html └── iSlider.js /eo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kele527/iSlider/HEAD/eo.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # iSlider 2 | iSlider 是一个如丝般润滑的高性能H5页面全屏滑动组件, 追求的是性能,简洁,易用. 3 | 4 | 官网地址: http://kele527.github.io/iSlider/ 5 | 6 | CDN acceleration and security protection for this project are sponsored by Tencent EdgeOne. 7 | 8 | [![eo.png](./eo.png)](https://edgeone.ai/?from=github) 9 | 10 | 11 | [![Powered by DartNode](https://dartnode.com/branding/DN-Open-Source-sm.png)](https://dartnode.com "Powered by DartNode - Free VPS for Open Source") 12 | -------------------------------------------------------------------------------- /demo5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 网页标题 6 | 7 | 8 | 9 | 10 | 18 | 19 | 20 | 21 | 22 |
23 |
24 | 1 25 |
26 |
27 | 28 |
29 |
30 | 3 31 |
32 |
33 | 34 | 37 | 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 kele527 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /demo1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 绿钻“高富帅”行动 6 | 7 | 8 | 9 | 10 | 11 | 14 |
15 | 16 |
17 |
18 |

你是否也试过漫漫长夜一个人过…

19 |
20 |

21 |

22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | 30 |
31 |
32 |

救星驾到 秒变高富帅秘诀

33 |
34 |

35 |

36 |
37 |
38 |
39 |
40 | 41 |
42 |
43 |

尊贵标识 终于，成为有身份的人！

44 |
45 |

46 |

47 |
48 |
49 |
50 |
51 | 52 |
53 |
54 |

最有品味 追求高品质，听歌只听无损音质

55 |
56 |

57 |

58 |
59 |
60 |
61 |
62 |
63 | 64 |
65 |
66 |

把妹神器 以歌传情，送她空间背景音乐

67 |
68 |

69 |

70 |
71 | 72 | 73 | 74 | 75 |
76 |
77 |
78 |
79 | 80 |
81 |
82 |

把妹成功！ 谢谢绿钻，让我登上人生巅峰

83 |
84 |

85 |

86 |
87 |

绿钻邀您加入高富帅行列
高高兴兴，回家过年！

88 | 89 |
90 |
91 |
92 | 93 |
94 |

加入绿钻 成为QQ音乐世界VIP，独享高大上特权

95 |
96 |
97 |

98 |

99 |
100 | 101 | 102 | 103 | 104 | 105 | 106 |
107 | 立即开通 108 |
109 |
110 |
111 | 112 |
113 |
114 | 115 |

你是第位参与者

116 |

分享即有机会得iPhone6

117 |
118 | 我也要赢iPhone6 119 |

每天送出1台，助力高富帅，回家好过年！

120 |
121 |
122 | 123 |
124 | 125 | 126 |
127 |
128 |
129 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 149 | 150 | 151 | 152 | 153 | 170 | 171 | -------------------------------------------------------------------------------- /demo2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | QQ音乐独家专区 6 | 7 | 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |

QQ音乐 独家专区

25 |

为正版音乐代言

26 |
27 | 28 | 华谊 29 | 30 | 31 | 华纳 32 | 33 | 34 | YG 35 | 36 | 37 | JVR 38 | 39 | 40 | 英皇 41 | 42 | 43 | 44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |

QQ音乐 独家专区

56 |

大咖云集

57 |
58 | 59 | 周杰伦 60 | 周杰伦 61 | 62 | 63 | 蔡依林 64 | 蔡依林 65 | 66 | 67 | 权志龙 68 | 权志龙 69 | 70 | 71 | 谢霆锋 72 | 谢霆锋 73 | 74 | 75 | 张靓颖 76 | 张靓颖 77 | 78 |
79 | 80 | 81 | 82 | 83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |

QQ音乐 独家专区

97 |

新秀崛起

98 |
99 | 100 | 简红 101 | 简红 102 | 103 | 104 | 崔子格 105 | 崔子格 106 | 107 | 108 | 袁娅维 109 | 袁娅维 110 | 111 | 112 | 覃桢 113 | BTOB 114 | 115 | 116 | 牛奶咖啡 117 | 牛奶咖啡 118 | 119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |

更多精彩，尽在QQ音乐独家专区

131 |
132 |
133 |
134 | 135 | 点击进入 136 |
137 | 138 |
139 |
140 |
141 | 142 |
143 |
144 |
145 | 146 | 147 | 148 |
149 |
150 |
151 | 152 | 153 | 154 | 155 | 156 |
157 |
158 |
159 | 165 |
166 |
167 | 168 | 169 | 183 | 184 | 185 | 186 | 201 | 202 | 203 | 204 | 205 | 206 | 231 | 232 | -------------------------------------------------------------------------------- /demo3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | QQ音乐MV进阶体验 7 | 8 | 9 | 12 | 13 | 14 | 15 |
16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 |
25 |
26 |
27 | 28 |
29 |
30 |

小时候 我们与世界相隔10000公里

31 |
32 | 33 | 播放 34 |
35 | 36 | 37 | 38 | 39 |
40 |
41 | 42 |
43 |
44 |

长大后 1米长的网线将我们连接到一起

45 |
46 | 47 | 播放 48 |
49 | 50 |
51 |
52 | 53 |
54 |
55 |

现在，QQ音乐让你与世界 仅有一个指尖的距离

56 |
57 | 58 | 播放 59 |
60 | 61 |
62 |
63 | 64 |
65 |
66 |

弹指间 看世界

67 | 68 | 立即体验双语MV 69 |

70 | TIPS：立即打开QQ音乐客户端搜索"双语MV"
即可体验更多双语MV 71 |

72 |
73 |
74 | 75 |
76 |
77 |

有奖活动

78 |
79 |

活动规则

80 |

1、将页面分享至朋友圈，并截图发送至QQ音乐公众号（qqmusic）

81 |

2、活动时间：2015年2月3日-2月15日

82 |

3、中奖用户我们将通过微信通知，24小时内未回复则视为放弃中奖资格

83 |

4、改成腾讯公司保留在法律规定的范围内对上述规则进行解释的权利

84 |
85 | 分享有奖 86 |
87 |

活动奖品

88 |

腾讯羊年公仔3个；正版CD专辑10张；年费绿钻10个

89 | 90 |
91 |
92 |
93 | 94 |
95 | 96 | 97 |
98 |
99 |
100 |

Loading...

101 |
102 |
103 | 104 | 105 | 106 |
107 | 108 | 109 | 110 |
111 |
112 |
113 | 114 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 313 | 314 | -------------------------------------------------------------------------------- /iSlider.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * iSlider 高性能全屏滑动组件 4 | * @class iSlider 5 | * @param {object} opts 6 | * @param {string} opts.wrap='.wrap' 容器 7 | * @param {string} opts.item='.item' 滚动单元的元素 8 | * @param {string} opts.playClass='play' 触发播放动画的class 9 | * @param {number} [opts.index=0] 设置初始显示的页码 10 | * @param {array} [opts.noslide=[]] 设置禁止滑动的页面序号(0开始), 禁止后 需要开发者手动绑定页面中的某个按钮事件进行滑动 11 | * @param {number} [opts.speed=400] 动画速度 单位:ms 12 | * @param {number} [opts.triggerDist=30] 触发滑动的手指移动最小位移 单位:像素 13 | * @param {boolean} [opts.isVertical=true] 是否是垂直滑动 默认是. 设成false为水平滑动. 14 | * @param {boolean} [opts.useACC=true] 是否启用硬件加速 默认启用 15 | * @param {boolean} [opts.fullScr=true] 是否是全屏的 默认是. 如果是局部滑动,请设为false 16 | * @param {boolean} [opts.preventMove=false] 是否阻止系统默认的touchmove移动事件, 默认不阻止, 该参数仅在局部滚动时有效, 如果是局部滚动 如果为true 那么在这个区域滑动的时候 将不会滚动页面. 如果是全屏情况 则会阻止 17 | * @param {boolean} [opts.lastLocate=true] 后退后定位到上次浏览的位置 默认true 18 | * @param {function} [opts.onslide] 滑动后回调函数 会回传index参数 19 | * @param {array} [opts.loadingImgs] loading需要加载的图片地址列表 20 | * @param {function} [opts.onloading] loading时每加载完成一个图片都会触发这个回调 回调时参数值为 (已加载个数,总数) 21 | * @param {number} [opts.loadingOverTime=15] 预加载超时时间 单位:秒 22 | * @desc 23 | 24 | - 如丝般高性能全屏动画滑屏组件, 主要应用于微信H5宣传页,海报,推广介绍等场景. 基于iSlider,可以快速搭建效果炫丽的H5滑屏页面. 25 | - 简洁,易用. 无css依赖. 26 | - 专注于页面滑动, 没有冗余代码 , 保证性能. 27 | - 组件没有任何依赖. 28 | - imgcache 引用地址 : http://imgcache.gtimg.cn/music/h5/lib/js/module/iSlider-1.0.min.js?_bid=363&max_age=2592000 29 | - github: https://github.com/kele527/iSlider 30 | 31 | 32 | * @example 33 | 34 | //极简用法 35 | new iSlider(); //容器默认是 .wrap 元素默认是 .item 动画播放class默认是 play 36 | 37 | //普通用法 38 | new iSlider({ 39 | wrap:'.wrap', 40 | item:'.item', 41 | playClass:'play', 42 | onslide:function (index) { 43 | console.info(index) 44 | } 45 | }); 46 | 47 | //带loading进度条用法 48 | new iSlider({ 49 | wrap:'.wrap', 50 | item:'.item', 51 | playClass:'play', 52 | onslide:function (index) { 53 | console.info(index) 54 | }, 55 | loadingImgs:[ 56 | 'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/open_cover.jpg?max_age=2592000', 57 | 'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/im_cover.jpg?max_age=2592000', 58 | 'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/bg1.jpg?max_age=2592000', 59 | 'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/bg2.jpg?max_age=2592000' 60 | ], 61 | onloading:function (loaded,total) { 62 | this.$('#loading div').style.width=loaded/total*100+'%'; 63 | if (loaded==total) { 64 | this.$('#loading').style.display="none" 65 | } 66 | } 67 | }); 68 | 69 | demo http://kele527.github.io/iSlider/demo1.html 70 | 71 | * @date 2014/11/3 星期一 72 | * @author rowanyang 73 | * 74 | */ 75 | function iSlider(opts) { 76 | this.opts={ 77 | wrap:'.wrap', 78 | item:'.item', 79 | playClass:'play', 80 | index:0, 81 | noslide:[], 82 | noslideBack:false, //当noslide生效的时候 是否允许往回滑动 默认不允许, 如果有需要可以开启 83 | speed:400, //滑屏速度 单位:ms 84 | triggerDist:30,//触发滑动的手指移动最小位移 单位:像素 85 | isVertical:true,//垂直滑还是水平滑动 86 | useACC:true, //是否启用硬件加速 默认启用 87 | fullScr:true, //是否是全屏的 默认是. 如果是局部滑动,请设为false 88 | preventMove:false, //是否阻止系统默认的touchmove移动事件, 默认不阻止, 该参数仅在局部滚动时有效, 如果是局部滚动 如果为true 那么在这个区域滑动的时候 将不会滚动页面. 如果是全屏情况 则会阻止 89 | lastLocate:true, //后退后定位到上次浏览的位置 默认开启 90 | loadingImgs:[], //loading 预加载图片地址列表 91 | onslide:function (index) {},//滑动回调 参数是本对象 92 | onloading:function (loaded,total) {}, 93 | loadingOverTime:15 //预加载超时时间 单位:秒 94 | } 95 | 96 | for (var i in opts) { 97 | this.opts[i]=opts[i]; 98 | } 99 | 100 | this.SS=false; 101 | try { 102 | this.SS=sessionStorage; 103 | this.SS['spt']=1;//检测是否是ios私密浏览模式 如果是私密模式 这一行会报错 进入到catch 104 | }catch (e) { 105 | this.SS=0; 106 | } 107 | 108 | this.init(); 109 | } 110 | /** @lends iSlider */ 111 | iSlider.prototype={ 112 | wrap:null, 113 | index : 0, 114 | length:0, 115 | _tpl:[], 116 | _delayTime:150, 117 | _sessionKey : location.host+location.pathname, 118 | _prev:null, 119 | _current:null, 120 | _next:null, 121 | $:function (o,p) { 122 | return (p||document).querySelector(o); 123 | }, 124 | addClass:function (o,cls) { 125 | if (o.classList) { 126 | o.classList.add(cls) 127 | }else { 128 | o.className+=' '+cls; 129 | } 130 | }, 131 | removeClass:function (o,cls) { 132 | if (o.classList) { 133 | o.classList.remove(cls) 134 | }else { 135 | o.className=o.className.replace(new RegExp('\\s*\\b'+cls+'\\b','g'),'') 136 | } 137 | }, 138 | init:function () { 139 | var self = this; 140 | this.wrap = typeof this.opts.wrap=='string' ? this.$(this.opts.wrap) : this.opts.wrap ; 141 | 142 | if (this.SS) { 143 | //使用sessionStorage来保存当前浏览到第几页了 后退回来的时候 定位到这一页 144 | this._sessionKey=btoa(encodeURIComponent(this._sessionKey+this.wrap.id+this.wrap.className)); 145 | 146 | var lastLocateIndex=parseInt(this.SS[this._sessionKey]); 147 | this.index = (this.opts.lastLocate && lastLocateIndex>=0) ? lastLocateIndex : 0; 148 | }else { 149 | this.index = this.opts.index || 0; 150 | } 151 | 152 | 153 | if (!this.wrap) { 154 | throw Error('"wrap" param can not be empty!'); 155 | return ; 156 | } 157 | 158 | this._tpl = this.wrap.cloneNode(true); 159 | this._tpl = this.opts.item ? this._tpl.querySelectorAll(this.opts.item) : this._tpl.children; 160 | 161 | for (var i=0; i=0) { 228 | this.index=parseInt(index); 229 | } 230 | this.wrap.innerHTML=''; 231 | 232 | var initDom = document.createDocumentFragment(); 233 | 234 | if (this.index>0) { 235 | this._prev=this._tpl[this.index-1].cloneNode(true); 236 | this._prev.style.cssText+=this._getTransform('-'+this.scrollDist+'px'); 237 | initDom.appendChild(this._prev) 238 | }else { 239 | this._prev=null; 240 | } 241 | this._current =this._tpl[this.index].cloneNode(true); 242 | 243 | this._current.style.cssText+=this._getTransform(0); 244 | initDom.appendChild(this._current); 245 | 246 | if (this.indexgy && this.opts.isVertical) { //水平滑动 314 | this.lockSlide=true; 315 | return ; 316 | }else if(gx=0) { 322 | //noslideBack 默认值是false 默认是禁用滑动后 前后都不能再滑动, 323 | //但是当noslideBack为true时, 禁用了这一页的滑动, 那么往下是划不动了 但是可以往上滑 324 | if ( !this.opts.noslideBack || (this.opts.isVertical ? (e.touches[0].pageY - this._touchstartY < 0) : (e.touches[0].pageX - this._touchstartX < 0)) ) { 325 | return ; 326 | } 327 | } 328 | 329 | 330 | var currentX = this.opts.isVertical ? e.touches[0].pageY:e.touches[0].pageX; 331 | this.deltaX2 = currentX - this.deltaX1;//记录当次移动的偏移量 332 | this.totalDist = this.startPos + currentX - this.touchInitPos; 333 | 334 | self._current.style.cssText+=this._getTransform(this.totalDist+'px'); 335 | this.startPos = this.totalDist; 336 | 337 | //处理上一张和下一张 338 | if (this.totalDist<0) {//露出下一张 339 | if (this._next) { 340 | this.totalDist2 = this.startPosNext + currentX - this.touchInitPos; 341 | self._next.style.cssText += this._getTransform(this.totalDist2+'px'); 342 | this.startPosNext = this.totalDist2; 343 | } 344 | }else {//露出上一张 345 | if (this._prev) { 346 | this.totalDist2 = this.startPosPrev + currentX - this.touchInitPos; 347 | self._prev.style.cssText += this._getTransform(this.totalDist2+'px'); 348 | this.startPosPrev = this.totalDist2; 349 | } 350 | } 351 | 352 | this.touchInitPos = currentX; 353 | }, 354 | _touchend : function (e) { 355 | if(e.target.getAttribute("stop") === "true")return; 356 | if(this.deltaX2 < -this.opts.triggerDist){ 357 | this.next(); 358 | }else if(this.deltaX2 > this.opts.triggerDist){ 359 | this.prev(); 360 | }else{ 361 | this._itemReset(); 362 | } 363 | this.deltaX2 = 0; 364 | }, 365 | _getTransform:function (dist) { 366 | var pos= this.opts.isVertical? '0,'+dist : dist+',0'; 367 | return ';-webkit-transform:' + (this.opts.useACC ? 'translate3d('+pos+',0)' : 'translate('+pos+')'); 368 | }, 369 | 370 | _itemReset:function () { 371 | var self = this; 372 | self._current.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform(0); 373 | if (self._prev) { 374 | self._prev.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform('-'+this.scrollDist+'px'); 375 | } 376 | if (self._next) { 377 | self._next.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform(this.scrollDist+'px'); 378 | } 379 | this.deltaX2 = 0; 380 | }, 381 | 382 | _loading:function () { 383 | var self = this; 384 | var imgurls=this.opts.loadingImgs; 385 | var fallback=setTimeout(function () { 386 | try { 387 | self.opts.onloading.call(self,total,total); 388 | } catch (e) { } 389 | 390 | self._pageInit(); 391 | },this.opts.loadingOverTime*1000);//loading超时时间 万一进度条卡那了 15秒后直接显示 392 | 393 | var imgs=[], loaded=1; 394 | var total=imgurls.length+1; 395 | for (var i=0; i 0) { 441 | this.index--; 442 | }else { 443 | this._itemReset(); 444 | return false; 445 | } 446 | 447 | // var nextIndex = this.index+1 > this.length-1 ? 0 : this.index+1; 448 | 449 | if (this._next) { 450 | this.wrap.removeChild(this._next); 451 | } 452 | 453 | this._next=this._current; 454 | this._current=this._prev; 455 | this._prev=null; 456 | 457 | this._next.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform(this.scrollDist+'px'); 458 | this._current.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform(0); 459 | if (this.SS) { 460 | this.SS[this._sessionKey]=this.index; 461 | } 462 | 463 | setTimeout(function () { 464 | 465 | if (self.$('.'+self.opts.playClass,self.wrap)) { 466 | self.removeClass(self.$('.'+self.opts.playClass,self.wrap),self.opts.playClass) 467 | } 468 | self.addClass(self._current,self.opts.playClass) 469 | 470 | try { 471 | self.opts.onslide.call(self,self.index); 472 | } catch (e) { 473 | // console.info(e) 474 | } 475 | 476 | var prevIndex = self.index-1; 477 | if (prevIndex < 0) { 478 | prevIndex = self.length-1; 479 | return false; 480 | } 481 | 482 | self._prev = self._tpl[prevIndex].cloneNode(true); 483 | self._prev.style.cssText+='-webkit-transition-duration:0ms;'+self._getTransform('-'+self.scrollDist+'px'); 484 | self.wrap.insertBefore(self._prev,self._current); 485 | 486 | },this._delayTime) 487 | 488 | }, 489 | 490 | /** 491 | * 滑动到下一页 492 | * @example 493 | s1.next(); 494 | */ 495 | next:function () { 496 | var self = this; 497 | 498 | if (!this._current || !this._next) { 499 | this._itemReset(); 500 | return ; 501 | } 502 | 503 | if (this.index < this.length-1) { 504 | this.index++; 505 | }else { 506 | this._itemReset(); 507 | return false; 508 | } 509 | 510 | // var prevIndex = this.index===0 ? this.length-1 : this.index-1; 511 | 512 | if (this._prev) { 513 | this.wrap.removeChild(this._prev); 514 | } 515 | 516 | this._prev=this._current; 517 | this._current=this._next; 518 | this._next=null; 519 | 520 | this._prev.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform('-'+this.scrollDist+'px'); 521 | this._current.style.cssText+='-webkit-transition-duration:'+this.opts.speed+'ms;'+this._getTransform(0); 522 | if (this.SS) { 523 | this.SS[this._sessionKey]=this.index; 524 | } 525 | 526 | setTimeout(function () { 527 | if (self.$('.'+self.opts.playClass,self.wrap)) { 528 | self.removeClass(self.$('.'+self.opts.playClass,self.wrap),self.opts.playClass) 529 | } 530 | self.addClass(self._current,self.opts.playClass) 531 | 532 | try { 533 | self.opts.onslide.call(self,self.index); 534 | } catch (e) { 535 | // console.info(e) 536 | } 537 | 538 | var nextIndex = self.index+1; 539 | if (nextIndex >= self.length) { 540 | return false; 541 | } 542 | 543 | self._next = self._tpl[nextIndex].cloneNode(true); 544 | self._next.style.cssText+='-webkit-transition-duration:0ms;'+self._getTransform(self.scrollDist+'px'); 545 | self.wrap.appendChild(self._next); 546 | 547 | },this._delayTime) 548 | 549 | }, 550 | /** 551 | * 跳转到指定页码 552 | * @param {number} index 页码 从0开始的 553 | * @example 554 | s1.slideTo(3); 555 | */ 556 | slideTo:function (index) { 557 | this._setHTML(index); 558 | this._pageInit(); 559 | } 560 | 561 | } 562 | 563 | if (typeof module == 'object') { 564 | module.exports=iSlider; 565 | }else { 566 | window.iSlider=iSlider; 567 | } 568 | --------------------------------------------------------------------------------