Unslider – 轻量的响应式 jQuery 内容轮播插件

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>