iTakeo

简易版的移动端滑动切换。

简易版的移动端滑动切换。自适应，可横向竖向。使用css3动画，性能不错，简单小巧，（压缩+gzip）只有2K。

布局使用了Flex。所以就免去了js去计算宽高。案例中使用了之前写的flex布局（点击这里查看）。

基本布局如下。

<div class="swiperWrap">
    <div class="contentWrap" flex>
        <div shrink="0">1</div>
        <div shrink="0">2</div>
        <div shrink="0">3</div>
        <div shrink="0">4</div>
    </div>
</div>01.
02.
03.
04.
05.
06.
07.
08.

js接口如下。

//直接调用
new iSwiper('.demo')
//带参数
var isw = new iSwiper('.demo',{
    speed : 500, //切换速度，默认500
    type : 'x' //滑动方向，还有y，默认x
    loop : false //是否开启循环，默认false
});
//提供如下方法
isw.to(2,200) //切换到第几个，从0开始，第二参数为本次切换的时间，可不写
isw.index() //获取当前索引值
isw.next(500) //切换到下一个，可选参数本次切换的时间
isw.prev(500) //切换到上一个，可选参数本次切换的时间
isw.prevent = false //滑动时是否阻止默认事件，默认false，不阻止
isw.transitionEnd(function ( n ){
    //每一次滑动结束会执行，这里的每一次指的是，不管有没有滑动整一列，n为当前索引
});
isw.changeEnd(function ( n ){
    //每成功滑动一列执行，n为当前索引
});
isw.touchMove(function ( e,n ){
    //滑动时执行。e为event对象，n为当前索引
});
如果需要某一块不需要滑动，添加class为"iswiper-no"即可。01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.