自己学习过程中关于以后有可能用到的技术的备份，微信广告滑屏组件 iSlider
转载：
iSlider 是个非常平滑的滑块，支持移动端 WebApp，HTML5App 和混合型的 App。
iSlider是移动端的滑动组件的最佳解决方案。他和普通的web 端的滑动插件有很大不同，面向的用户和解决的问题也有很大差别，iSlider 的出现，解决的根本问题是内容的分屏显示，通过滑动操作来表示上一页内容或是下一页内容。而iSlider 是用最优雅的方式去解决，尽可能的节省内存，提高性能。在功能上iSlider 支持：
-
图片和dom 两种类型滑动，图片的类型很适合读图类的app，dom 类型则可以根据需要配置成各式各样的webapp
-
自定义的事件回调，你可以在滑动中，滑动结束，或是滑动开始绑定自己的事件回调
-
可配置的滑动动画，在获得高性能的同时，你仍然可以指定一些特殊的高级的动画效果来完成你的app，iSlider 提供default，flip，depth，flow, rotate, w等动画方式来丰富你的滑动效果。
-
iSlider 会帮你处理好屏幕旋转事件，你只要考虑的是，屏幕旋转后，你的dom 或是 图片改如何显示。
-
iSlider 还有一些小功能，比如滑动边界递减，自动滑动，垂直水平滑动可配置。
而使用iSlider也非常容易上手，你只需要准备一个dom节点用来存放你的slider：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var data = [{ height: 414, width: 300, content: "imgs/1.jpg",},{ height: 414, width: 300, content: "imgs/2.jpg",},{ height: 414, width: 300, content: "imgs/3.jpg",}]; |
然后你需要准备展示的数据，这里展示的数据分两种类型，拿图片类型的slider 举例，你只需要准备好的是图片的json 数据，数据格式如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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>‘}]; |
调用时候，需要对iSlider 实例化：
|
1
2
3
4
5
6
7
8
9
10
11
|
<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> |
这样就可以运行一个iSlider 的实例了，关于上面一些参数的意义，可以在官网看到：
http://be-fe.github.io/iSlider/
-
iSlider 的依赖：iSlider 不依赖任何库或是框架，你可以很轻松的把他用在自己的项目中，不会和zepto 或是jqmobi 冲突。
-
体积大小：iSlider 压缩后代码2kb，你可以很随意的打包在你的项目中。
-
性能上：iSlider借助了手机硬件加速，所有的动画都尽可能重用dom ，并且使用尽可能少dom 来完成整个渲染，支持无尽的滚动，并且在手指快速滑动中也达到流畅的体验。
未来：
iSlider 还会持续开发，预计会更丰富对dom 类型的支持，方便开发者用iSlider 来build 自己的 app。对图形类型也将支持放大缩小。iSlider目前的版本是 1.0-beta ，预计这些功能会在下一个版本加上。