码迷,mamicode.com
首页 > 移动开发 > 详细

iSlider手机平台JS滑动组件

时间:2014-12-10 19:46:58      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:des   http   io   ar   使用   sp   java   on   数据   

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代码:

<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 = [{

   ‘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滑动组件

标签:des   http   io   ar   使用   sp   java   on   数据   

原文地址:http://www.cnblogs.com/axl234/p/4156132.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!