iSlider 优秀的移动端 JS 滑块组件

发布于 2020-04-24 22:26:25 字数 3198 浏览 2295 评论 0

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

漫雪独思

文章 0 评论 0

垂暮老矣

文章 0 评论 0

鹊巢

文章 0 评论 0

萌酱

文章 0 评论 0

雨说

文章 0 评论 0

冰葑

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文