首页 > 代码库 > iSlider手机平台JS滑动组件
iSlider手机平台JS滑动组件
iSlider手机平台JS滑动组件，无任何插件依赖。它能够处理任何元素，例如图片或者DOM元素。它有如下特性：能够自定义动画，自带的动画包括default, rotate, flip 和 depth你能够简易地添加回调函数(onslidestart, onslide, onslideend, onslidechange)我们还支持滑动衰减效果，循环效果，自动滑动效果，水平/垂直滑动。兼容主流浏览器，懒人图库推荐下载！
使用方法：
1、你需要为iSlider先新建好数据:
var data = http://www.mamicode.com/[{
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 = http://www.mamicode.com/[{
‘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>‘
}];
其他更多的配置选项请看：
http://be-fe.github.io/iSlider/index.html
iSlider手机平台JS滑动组件