在移动开发中,iSlider,出色的性能滑块解决了你的痛苦

分享于 

6分钟阅读

Web开发

  繁體 雙語

Demo

相关链接

Github页面: https://github.com/BE-FE/iSlider 插件( 它包括英文自述文件)

官方网页:http://be-fe.github.io/iSlider/index_en.html

内容

Slider在大多数网站中似乎是一个非常常见的组件。 著名的解决方案是 iScroll,Swiper等项目。

在第一次看到的时候,我认为没有必要制作类似的组件,而是浪费时间。 直到有一天我看到了 iSlider。 我打赌这可能是市场上最流畅的slider 组件。 令人惊讶的是,在这样一个轻量框架中,它为开发人员提供了丰富的动画类型。 我觉得这必须是一个有意义的项目,所以我决定加入和找到它的秘密和武器,比如iScroll和 Swiper。

功能:

  • 它的性能的关键在于iSlider只维护 3"li",使内存尽可能小。 所以你永远不会在iSlider中遇到laggy问题。
  • 这是个重量轻的框架。 压缩后大约 2KB。
  • 它既支持图片又支持 dom,这是两个。
  • 它提供了几种动画类型,你当然可以自己定制它。
  • 回调函数,如 onslidestart,onslideend等。
  • 支持阻尼效果,垂直滑动和自动滑动。

目前,它拥有稳定的版本,但它仍然是一个快速增长的项目。 迟早,组件中会增加更多的特性。 不管将要添加什么特性,我们将记住最佳性能是我们的目标。

我会让你知道未来的开发 direction,它们会在一到两周内。

  • 图像加载程序
  • 放大并缩小
  • 选项卡 switch 菜单

实际上这不仅仅是一个推荐帖子它是一个招聘职位。 我希望你能加入这个快速增长的项目并让奇迹。

使用代码

学习iSlider的最好方法是查看演示文稿。 在存档中,你将找到一个演示文件夹。 大部分的脚本功能都在这里概述。 iSlider 是一个需要为每个dom区域初始化的类。

在开始之前,你需要为 iSlider 准备一些数据:

var data = [{
 height: 300,
 width: 414,
 content: "imgs/1.jpg",
},{
 height: 300,
 width: 414,
 content: "imgs/2.jpg",
},{
 height: 300,
 width: 414,
 content: "imgs/3.jpg",
}];

你只需要准备的HTML结构是:

<divid="iSlider-wrapper"></div>

要使它可以运行,你所需要做的就是启动:

<scripttype="text/javascript">var islider = new iSlider({
 dom : document.getElementById('iSlider-wrapper'),
 data : data
 });</script>

如果你想添加更多效果或者选项,可以按照演示/图片中的演示进行操作:

<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>

完成。

配置 iSlider

除了使用iSlider的基本方法之外,你还可以定制我们提供的功能。 例如如果希望将dom元素放在列表中,则可以像这样更改数据 array:

var data = [{
 'height' : '100%',
 'width' : '100%',
 'content' : '<div><h1>Home</h1><h2>This is home page</h2><p>home is pretty awesome</p><div>'
},{
 'height' : '100%',
 'width' : '100%',
 'content' : '<div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awesome</p><div>'
},{
 'height' : '100%',
 'width' : '100%',
 'content' : '<div><h1>Page2</h1><h2>This is Page2</h2><p>Page2 is pretty awesome</p><div>'
}];

如果希望实现介绍部分中提到的效果,你可以:

<script type="text/javascript">
 var islider = new iSlider({
 dom : document.getElementById('iSlider-wrapper'),
 data : data,
 duration: 2000,
 isVertical: true,
 isLooping: true,
 isDebug: true,
 isAutoplay: true });
</script>

理解 iSlider

下面给出了对你能够操作的选项的清晰描述:

选项描述
domHTML对象包装图像列表的DOM元素
数据内容的array ( 图片| html )图片数据,例如:
[{
 height: 377,
 width: 600,
 content:"pics/1.jpg"
}]
类型字符串( pic | dom )默认值为'pic','dom'也支持
工期整数( 1000 == 1 )图像幻灯片时的时间间隔。 仅适用于 isAutoplaytrue
animateTypeString当前,默认,旋转,翻转和深度都支持动画
onslide函数当手指移动时的回调函数
onslidestart函数当手指触摸屏幕时的回调函数
onslideend函数当手指移出屏幕时的回调函数
onslidechange函数当自动播放模式打开和一个图像幻灯片时回调函数
isDebug布尔( true | false )打开/关闭调试模式。 某些调试消息将输出。
isLooping布尔( true | false )打开/关闭无限循环模式
isAutoplay布尔( true | false )转/关自动播放模式
isVertical布尔( true | false )垂直或者水平滑动幻灯片

PERF  性能  sli  Slide  Slider  STUN  
相关文章