超小的jquery轮播插件-Unslider

unslider特性

跨浏览器
Unslider已经在所有最新的浏览器上测试过了，并且对那些老旧的浏览器也能很出色的降级处理。

支持键盘导航
如果需要，可以加入键盘方向键导航。试一试左右方向键吧！

自动调整高度
并不是每个幻灯片都很规范，Unslider能够自动调整高度。

Yep，他还支持响应式布局
如今哪个网站还不支持响应式布局就已经非常OUT了。Unslider帮你轻松搞定！

如何使用Unslider如何使用Unslider

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//unslider.com/unslider.js"></script>

准备HTML代码

<div class="banner">
    <ul>
        <li>第一个轮播</li>
        <li>第二个轮播</li>
        <li>最后一个轮播</li>
    </ul>
</div>

使用CSS样式美化一下

.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }

使用jQuery初始化

$(function() {
    $('.banner').unslider();
});
或者带参数
$('.banner').unslider({
  speed: 500,               // 滑过速度，单位毫秒
  delay: 3000,              //两个划片之间延迟，单位毫秒
  complete: function() {},  // 滑动完成调用函数
  keys: true,               //  是否启用键盘，左、右键控制
  dots: true,               //  是否显示圆点
  fluid: false              //   是否支持响应式
});

添加向前/向后滑动链接

<!-- 网页标签代码-->
<a href="#" class="unslider-arrow prev">上一个</a>
<a href="#" class="unslider-arrow next">下一个</a>

<!--JavaScript 脚本代码-->
<script>
    var unslider = $('.banner').unslider();
    $('.unslider-arrow').click(function() {
        var fn = this.className.split(' ')[1];
        //Either do unslider.data('unslider').next() or .prev() depending on the className
        unslider.data('unslider')[fn]();
    });
</script>