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

发布于 2020-04-24 22:26:25 字数 3198 浏览 2289 评论 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>'
}];