iSlider手機平臺JS滑動組件,無任何插件依賴。它能夠處理任何元素,例如圖片或者DOM元素。它有如下特性:能夠自定義動畫,自帶的動畫包括default, rotate, flip 和 depth你能夠簡易地添加回調函數(onslidestart, onslide, onslideend, onslidechange)我們還支持滑動衰減效果,循環效果,自動滑動效果,水平/垂直滑動。兼容主流瀏覽器,次元立方推薦下載!
使用方法:
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代碼:
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' : '
home is pretty awsome
},{
'height' : '100%',
'width' : '100%',
'content' : '
page1 is pretty awsome
},{
'height' : '100%',
'width' : '100%',
'content' : '
Page2 is pretty awsome
}];
其他更多的配置選項請看:
http://be-fe.github.io/iSlider/index.html