iSlider 优秀的移动端 JS 滑块组件
iSlider手机平台JS滑动组件,无任何插件依赖。它能够处理任何元素,例如图片或者DOM元素。
- iSlider 的依赖:iSlider 不依赖任何库或是框架,你可以很轻松的把他用在自己的项目中,不会和zepto 或是jqmobi 冲突。
- 体积大小:iSlider 压缩后代码2kb,你可以很随意的打包在你的项目中。
- 性能上:iSlider借助了手机硬件加速,所有的动画都尽可能重用dom ,并且使用尽可能少dom 来完成整个渲染,支持无尽的滚动,并且在手指快速滑动中也达到流畅的体验。
取名叫 iSlider 是为了像 iScroll 致敬,iSlider 是移动的滑动组件的最佳解决方案。在 WEB 轮播图已经变得小儿科的现在,很多人会质疑重新写个移动端的价值?其实移动端与web的环境有很多不同,用户习惯,行为也有很大的差异,而且移动端的浏览器,应用场景和 Web 端也差别很大。
特性
- 能够自定义动画,自带的动画包括default, rotate, flip 和 depth
- 你能够简易地添加回调函数(onslidestart, onslide, onslideend, onslidechange)
- 我们还支持滑动衰减效果,循环效果,自动滑动效果,水平/垂直滑动。
- 兼容主流浏览器
主要目的
那么 iSlider 的出现,解决的根本问题是内容的分屏显示,通过滑动操作来表示上一页内容或是下一页内容。而iSlider 是用最优雅的方式去解决,尽可能的节省内存,提高性能。在功能上iSlider 支持:
- 图片和dom 两种类型滑动,图片的类型很适合读图类的 app,dom 类型则可以根据需要配置成各式各样的 webapp
- 自定义的事件回调,你可以在滑动中,滑动结束,或是滑动开始绑定自己的事件回调
- 可配置的滑动动画,在获得高性能的同时,你仍然可以指定一些特殊的高级的动画效果来完成你的 app,iSlider 提供 3d,flip,depth 等动画方式来丰富你的滑动效果。
- iSlider 会帮你处理好屏幕旋转事件,你只要考虑的是,屏幕旋转后,你的dom 或是 图片改如何显示。
- iSlider 还有一些小功能,比如滑动边界递减,自动滑动,垂直水平滑动可配置。
使用方法
1、你需要为iSlider先新建好数据:
var data = [{
height: 475,
width: 400,
content: "imgs/1.jpg",
},{
height: 527,
width: 400,
content: "imgs/2.jpg",
},{
height: 400,
width: 512,
content: "imgs/3.jpg",
}];
在页面插入以下HTML代码:
<div id="iSlider-wrapper"></div>
2 要使其运行,按下面例子新建 ISlider 类:
<script type="text/javascript">
var iSlider = new iSlider({
dom : document.getElementById('iSlider-wrapper'),
// iSlider-wrapper于html代码里的id对应
data : data
});
</script>
3 如果你想加其它效果,可以按照我们demo/picture示例添加:
<script type="text/javascript">
var islider = new iSlider({
data: list,
dom: document.getElementById("iSlider-wrapper"),
isVertical: true,
isLooping: false,
isDebug: true,
isAutoplay: false,
animateType: 'rotate'
});
</script>
4 如果你想滑动DOM元素而非图片,你可以按以下的格式新建DOM数据:
var data = [{
'height' : '100%',
'width' : '100%',
'content' : '<div><h1>Home</h1><h2>This is home page</h2><div>'
},{
'height' : '100%',
'width' : '100%',
'content' : '<div><h1>Page1</h1><h2>This is page1</h2><div>'
},{
'height' : '100%',
'width' : '100%',
'content' : '<div><h1>Page2</h1><h2>This is Page2</h2><div>'
}];
相关链接
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论