iSlider是一个表现出众，无任何插件依赖的手机平台javascript滑动组件。它能够处理任何元素，例如图片或者DOM元素。它有如下特性：
- 能够自定义动画，自带的动画包括 default, rotate, flip, depth
- 你能够简易地添加回调函数(onslidestart, onslide, onslideend, onslidechange)
- 我们还支持滑动衰减效果，循环效果，自动滑动效果，水平/垂直滑动
在你开始之前，你需要为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>
要使其运行，按下面例子新建ISlider类:
<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>
That's it.
除了上文提到的基本部署模式，你还可以自定义我们提供的特性。例如，如果你想滑动DOM元素而非图片，你可以按以下的格式新建DOM数据:var data = [{
'height' : '100%',
'width' : '100%',
'content' : '<div><h1>Home</h1><h2>This is home page</h2><p>home is pretty awsome</p><div>'
},{
'height' : '100%',
'width' : '100%',
'content' : '<div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>'
},{
'height' : '100%',
'width' : '100%',
'content' : '<div><h1>Page2</h1><h2>This is Page2</h2><p>Page2 is pretty awsome</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元素的包裹DOM元素 |
| data | Array of Content(picture | html) | 若是图片数据，格式如下:
[{
height: 377,
width: 600,
content:"pics/1.jpg"
}]
|
| type | String (pic | dom) | 默认值是'pic', 也支持'dom' |
| duration | Integer (1000 == 1s) | 每个图片滑动的间隔时间，仅限于自动滑动模式 |
| animateType | String | 目前支持默认default, rotate, flip, depth |
| onslide | Function | 手指滑动时的回调函数 |
| onslidestart | Function | 手指触屏时的回调函数 |
| onslideend | Function | 手指离开屏幕时的回调函数 |
| onslidechange | Function | 自动滑动模式下当图片滑动时的回调函数 |
| isDebug | Boolean (true | false) | 开启/关闭调度模式 |
| isLooping | Boolean (true | false) | 开启/关闭循环模式 |
| isAutoplay | Boolean (true | false) | 开启/关闭自动滑动模式 |
| isVertical | Boolean (true | fasle) | 开启水平/垂直滑动模式 |
Copyright (c) 2014 BE-FE
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent