在当今的网页设计中，滑动组件几乎成为了标准配置。市面上有许多著名的滑动解决方案，比如iScroll和Swiper。最初，认为没有必要再开发类似的组件，这似乎是在浪费时间。然而，直到有一天，遇到了iSlider，确信这可能是市场上最流畅的滑动组件。令惊讶的是，在这样一个轻量级框架中，它为开发者提供了丰富的动画类型选择。感到这一定是一个有意义的项目，所以决定加入并探索它为何有潜力超越iScroll和Swiper等竞争对手的秘密武器。
iSlider的特点包括：
目前，iSlider有稳定的版本发布，但它仍然是一个快速发展的项目。迟早，更多的功能会被添加到组件中。无论添加什么功能，都会牢记最佳性能是目标。
将让了解一些未来的发展方向，它们将在一两个星期内发生。
实际上，这不仅仅是一个推荐帖子，这是一个招聘帖子。真诚地希望能加入这个快速发展的项目，一起创造奇迹。
学习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结构是：
<div id="iSlider-wrapper"></div>
要使其可运行，只需要初始化：
<script type="text/javascript">
var islider = new iSlider({
dom: document.getElementById('iSlider-wrapper'),
data: data
});
</script>
如果想添加更多的效果或选项，可以按照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>
除了可以用iSlider做的基本内容，还可以定制提供的功能。例如，如果更喜欢在列表上放置DOM元素，可以像这样更改数据数组：
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>
| 选项 | 值 | 描述 |
|---|---|---|
| dom | HTML Object | 包装图片列表的DOM元素 |
| data | Array of Content(picture | html) | 图片数据，例如： |
| type | String (pic | dom) | 默认值是'pic'，也支持'dom' |
| duration | Integer (1000 == 1s) | 图片滑动的时间间隔。仅在isAutoplay为true时应用 |
| animateType | String | 目前支持的动画有：默认、旋转、翻转和深度 |
| onslide | Function | 当手指移动时的回调函数 |
| onslidestart | Function | 当手指触摸屏幕时的回调函数 |
| onslideend | Function | 当手指移出屏幕时的回调函数 |
| onslidechange | Function | 当自动播放模式开启且一张图片滑动时的回调函数 |
| isDebug | Boolean (true | false) | 开启/关闭调试模式。一些调试消息将输出。 |
| isLooping | Boolean (true | false) | 开启/关闭无限循环模式 |
| isAutoplay | Boolean (true | false) | 开启/关闭自动播放模式 |
| isVertical | Boolean (true | false) | 垂直或水平滑动 |