-
Notifications
You must be signed in to change notification settings - Fork 449
Notices
iSlider采用了固定3个<li>
来展示内容,从而避免内容/图片过多时DOM越来越多,越来越卡的情况,但是同时使用上也要有一些额外需要注意的地方。
####需要使用事件代理绑定事件
在dom模式下,由于我们并没有将全部dom都加载到文档上,因此不能直接在dom内容上进行事件绑定
如果你使用jQuery或者Zepto,可以使用delegate或者on方法中的事件代理,用islider最外层的wrap
或者wrap > ul
来代理内部元素的事件,如果您不准备采用第三方库,我们提供了一个简单的bind方法来帮助您代理事件:
islider = new iSlider(opts);
islider.bind('click', '#test', function(){
alert('success');
})
其中第一个参数为事件类型,第二个参数为元素选择器,目前只支持简单的id,class和tag选择,语法和jQuery相同,第三个参数为回调函数。
####图片预加载 图片并不是一开始就全部加载的,我们会进行图片的预加载,如果发生换页,islider会自动加载下下张图片。
####销毁islider,释放内存
如果您制作的是一个单页应用,页面内容改变时可能需要销毁之前页面的内容,由于islider中进行了事件绑定,仅仅销毁页面元素无法清除islider的引用,islider提供了destroy
方法来释放内存,例如:
function scope() {
islider = new iSlider(opts);
if (redirect) {
islider.destroy();
}
}
(注意:如果需要destroy,islider不能定义为全局变量,因为只有页面重载,全局变量才能被销毁。)
####打包
islider追求的是最高的效率,但是又需要保证功能的多样,因此我们在1.1版本之后采用了AMD模块化组织代码,通过gulp打包工具build出不依赖AMD loader的版本。
目前我们发布可用包放置在build文件夹下,其中islider.js是全功能包,islider_core.js是核心包。多数情况下,建议您使用核心包,以缩小体积,提升性能。
全功能包有以下额外的功能:
- 动画效果
- 图片缩放
- 圆点导航
- 左右按钮
您也可以通过修改打包工具的配置,自定义功能:
- 打开gulpfile.js
- 找到如下代码:
amdClean({
'include': ['islider_core', 'plugins/islider_animate', 'plugins/islider_zoom', 'plugins/islider_button', 'plugins/islider_dot'],
'globalModules': ['iSlider'],
'outputFile': './build/islider.js'
});
- 修改include字段后的数组,选择您需要的插件。
- 安装gulp,执行npm install
- 执行gulp build命令,获得您自定义的islider.js
####圆点导航与点击按钮 如果您使用的是全功能包,或者您自定义的islider包含了这两个插件,才可以使用这两个功能。 (注意:目前只有横向滑动加入了这两个功能)
islider = new iSlider(opts);
islider.addBtn(); //添加左右点击按钮
islider.addDot(); //添加圆点导航
您可以在islider.css中来修改按钮和圆点的样式。
如果您使用的是全功能包,或者您自定义的islider包含了islider_zoom
islider = new iSlider({
wrap: wrap,
useZoom: true //添加该配置项
});
目前只有在缩放小于或等于正常尺寸时才可以继续滑动,如果处于放大状态,则不能滑动。