Unslider 是一款非常轻量的 jQuery 插件（压缩后不到3KB），能够用于任何 HTML 内容的滑动。

可以响应容器的大小变化，自动排布不用大小的滑块。可以通过整合 jQuery.event.swipe 来让其

支持触屏设备的滑动功能。

使用方法如下:

1.引用js

<span style="font-family:Microsoft YaHei;font-size:18px;"><script src="//code.jquery.com/jquery-latest.min.js"></script>

<script src="//unslider.com/unslider.js"></script></span>

2.准备好html

<span style="font-family:Microsoft YaHei;font-size:18px;"><div class="banner">

    <ul>

        <li>This is a slide.</li>

        <li>This is another slide.</li>

        <li>This is a final slide.</li>

    </ul>

</div></span>

3.设置html样式

<span style="font-family:Microsoft YaHei;font-size:18px;">.banner { position: relative; overflow: auto; }

.banner li { list-style: none; }

.banner ul li { float: left; }</span>

4.调用

<span style="font-family:Microsoft YaHei;font-size:18px;">$(function() {

    $('.banner').unslider();

});</span>

参数介绍

$('.banner').unslider({

    speed: 500,               // 动画的速度,没有过度效果时为 false  (整型或布尔型)

    delay: 3000,              // 幻灯片之间的延迟，没有自动播放时为false（整数或布尔）

    complete: function() {},  // 播放每张幻灯片后调用的函数

    keys: true,               // 允许键盘左右键控制

    dots: true,               // 显示点导航

    fluid: false              // 支持响应式设计

});

自定义向前,向后链接

<a href="#" class="unslider-arrow prev">前一张</a>

<a href="#" class="unslider-arrow next">后一张</a>

<script>

    var unslider = $('.banner').unslider();

    $('.unslider-arrow').click(function() {

        var fn = this.className.split(' ')[1];

        //或者根据类名称 unslider.data('unslider').next() or .prev()

        unslider.data('unslider')[fn]();

    });

</script>

Unslider的属性

var slidey = $('.banner').unslider(),

    data = slidey.data('unslider');

//开始轮播

data.start();

//停止轮播

data.stop();

// 移动指定轮播内容

data.move(2, function() {});

//  data.move(0);

//  手动启用键盘快捷键

data.keys();

//  下一个轮播内容

data.next();

//  前一个轮播内容

data.prev();

//  手动添加导航点

data.dots();

该插件源码

<span style="font-family:Microsoft YaHei;font-size:18px;">/**

 *   Unslider by @idiot and @damirfoy

 *   Contributors:

 *   - @ShamoX

 *

 */

(function($, f) {

    var Unslider = function() {

        //  Object clone

        var _ = this;

        //  Set some options

        _.o = {

            speed: 500,     // animation speed, false for no transition (integer or boolean)

            delay: 3000,    // delay between slides, false for no autoplay (integer or boolean)

            init: 0,        // init delay, false for no delay (integer or boolean)

            pause: !f,      // pause on hover (boolean)

            loop: !f,       // infinitely looping (boolean)

            keys: f,        // keyboard shortcuts (boolean)

            dots: f,        // display ••••o• pagination (boolean)

            arrows: f,      // display prev/next arrows (boolean)

            prev: '←',      // text or html inside prev button (string)

            next: '→',      // same as for prev option

            fluid: f,       // is it a percentage width? (boolean)

            starting: f,    // invoke before animation (function with argument)

            complete: f,    // invoke after animation (function with argument)

            items: '>ul',   // slides container selector

            item: '>li',    // slidable items selector

            easing: 'swing',// easing function to use for animation

            autoplay: true  // enable autoplay on initialisation

        };

        _.init = function(el, o) {

            //  Check whether we're passing any options in to Unslider

            _.o = $.extend(_.o, o);

            _.el = el;

            _.ul = el.find(_.o.items);

            _.max = [el.outerWidth() | 0, el.outerHeight() | 0];

            _.li = _.ul.find(_.o.item).each(function(index) {

                var me = $(this),

                    width = me.outerWidth(),

                    height = me.outerHeight();

                //  Set the max values

                if (width > _.max[0]) _.max[0] = width;

                if (height > _.max[1]) _.max[1] = height;

            });

            //  Cached vars

            var o = _.o,

                ul = _.ul,

                li = _.li,

                len = li.length;

            //  Current indeed

            _.i = 0;

            //  Set the main element

            el.css({width: _.max[0], height: li.first().outerHeight(), overflow: 'hidden'});

            //  Set the relative widths

            ul.css({position: 'relative', left: 0, width: (len * 100) + '%'});

            li.css({'float': 'left', width: (_.max[0]) + 'px'});

            //  Autoslide

            o.autoplay && setTimeout(function() {

                if (o.delay | 0) {

                    _.play();

                    if (o.pause) {

                        el.on('mouseover mouseout', function(e) {

                            _.stop();

                            e.type == 'mouseout' && _.play();

                        });

                    };

                };

            }, o.init | 0);

            //  Keypresses

            if (o.keys) {

                $(document).keydown(function(e) {

                    var key = e.which;

                    if (key == 37)

                        _.prev(); // Left

                    else if (key == 39)

                        _.next(); // Right

                    else if (key == 27)

                        _.stop(); // Esc

                });

            };

            //  Dot pagination

            o.dots && nav('dot');

            //  Arrows support

            o.arrows && nav('arrow');

            //  Patch for fluid-width sliders. Screw those guys.

            if (o.fluid) {

                $(window).resize(function() {

                    _.r && clearTimeout(_.r);

                    _.r = setTimeout(function() {

                        var styl = {height: li.eq(_.i).outerHeight()},

                            width = el.outerWidth();

                        ul.css(styl);

                        styl['width'] = Math.min(Math.round((width / el.parent().width()) * 100), 100) + '%';

                        el.css(styl);

                    }, 50);

                }).resize();

            };

            //  Swipe support

            if ($.event.special['swipe'] || $.Event('swipe')) {

                el.on('swipeleft swiperight swipeLeft swipeRight', function(e) {

                    e.type.toLowerCase() == 'swipeleft' ? _.next() : _.prev();

                });

            };

            return _;

        };

        //  Move Unslider to a slide index

        _.to = function(index, callback) {

            if (_.t) {

                _.stop();

                _.play();

                    }

            var o = _.o,

                el = _.el,

                ul = _.ul,

                li = _.li,

                current = _.i,

                target = li.eq(index);

            $.isFunction(o.starting) && !callback && o.starting(el, li.eq(current));

            //  To slide or not to slide

            if ((!target.length || index < 0) && o.loop == f) return;

            //  Check if it's out of bounds

            if (!target.length) index = 0;

            if (index < 0) index = li.length - 1;

            target = li.eq(index);

            var speed = callback ? 5 : o.speed | 0,

                easing = o.easing,

                obj = {height: target.outerHeight()};

            if (!ul.queue('fx').length) {

                //  Handle those pesky dots

                el.find('.dot').eq(index).addClass('active').siblings().removeClass('active');

                el.animate(obj, speed, easing) && ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, easing, function(data) {

                    _.i = index;

                    $.isFunction(o.complete) && !callback && o.complete(el, target);

                });

            };

        };

        //  Autoplay functionality

        _.play = function() {

            _.t = setInterval(function() {

                _.to(_.i + 1);

            }, _.o.delay | 0);

        };

        //  Stop autoplay

        _.stop = function() {

            _.t = clearInterval(_.t);

            return _;

        };

        //  Move to previous/next slide

        _.next = function() {

            return _.stop().to(_.i + 1);

        };

        _.prev = function() {

            return _.stop().to(_.i - 1);

        };

        //  Create dots and arrows

        function nav(name, html) {

            if (name == 'dot') {

                html = '<ol class="dots">';

                    $.each(_.li, function(index) {

                        html += '<li class="' + (index == _.i ? name + ' active' : name) + '">' + ++index + '</li>';

                    });

                html += '</ol>';

            } else {

                html = '<div class="';

                html = html + name + 's">' + html + name + ' prev">' + _.o.prev + '</div>' + html + name + ' next">' + _.o.next + '</div></div>';

            };

            _.el.addClass('has-' + name + 's').append(html).find('.' + name).click(function() {

                var me = $(this);

                me.hasClass('dot') ? _.stop().to(me.index()) : me.hasClass('prev') ? _.prev() : _.next();

            });

        };

    };

    //  Create a jQuery plugin

    $.fn.unslider = function(o) {

        var len = this.length;

        //  Enable multiple-slider support

        return this.each(function(index) {

            //  Cache a copy of $(this), so it

            var me = $(this),

                key = 'unslider' + (len > 1 ? '-' + ++index : ''),

                instance = (new Unslider).init(me, o);

            //  Invoke an Unslider instance

            me.data(key, instance).data('key', key);

        });

    };

    Unslider.version = "1.0.0";

})(jQuery, false);</span>