iTakeo

轻量级轮播图小插件。

轻量级轮播图插件，可全屏自适应，压缩后仅有2K多，麻雀虽小，五脏俱全。不用在为了一个轮播图，而去加载几十K的大插件了，下面看使用方法。

html

<div class="wrap">
    <ul> //这里必须为第一个子元素
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>01.
02.
03.
04.
05.
06.
07.
08.

css

.wrap{width:90%;height: 300px;overflow: hidden;}
ul {width: 100%;height: 100%;position: relative; }
ul li{ list-style: none;height: 100%;width: 100%; position: absolute; left: 0px;top: 0px;display: none;/*隐藏*/}
/*注意，下面这三个class必须为这样的类名，因为没有以参数的形式写进js，所以不能改变*/
/*如果左右切换复制以下css*/
li.active{display: block}
li.nextList{ display:block;left: -100%}
li.prevList{ display:block;left: 100%}
/*如果上下切换复制以下css*/
li.active{display: block}
li.nextList{ display:block;top: -100%}
li.prevList{ display:block;top: 100%}
/*如果透明切换用以下css*/
li.active{display: block}
li.nextList{ display:block;opacity: 0;filter:alpha(opacity:0)}
li.prevList{ display:block;opacity: 0;filter:alpha(opacity:0)}01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.

上面css中列表li为absolute，所以固定了高度，并不会被图片撑开，如果需要高度跟着图片撑开的话，修改为relative，并将nextList和prevList添加position: absolute即可。

调用接口：

//直接传入class或者id
var es = new EasySlide('.wrap');
//也可以第二个参数带入配置，配置如下
var es = new EasySlide('.wrap',{
    speed :500,   //切换速度
    type : 'x',   //切换类型，有3个选项，x，y，fade（这个代表渐隐渐现）
    time : 3000,  //自动播放间隔时间
    auto : true,  //是否自动播放
    before : function(n){
        //每次切换之前执行，n为当前索引值
    },
    after : function(n){
       //每次切换结束后执行，n为当前索引值
    }
});
es.active  //获取当前的索引值
//其他方法
es.stop() //停机切换
es.start() //开始切换
es.to (3) //切换到第几个
es.next() //切换下一个
es.prev() //切换上一个 01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.