Unslider 是一款非常轻量的 jQuery 插件（压缩后不到3KB），能够用于任何 HTML 内容的滑动。
可以响应容器的大小变化，自动排布不用大小的滑块。可以通过整合 jQuery.event.swipe 来让其
支持触屏设备的滑动功能。
使用方法如下:
1.引用js
<span><script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="http://unslider.com/unslider.js"></script></span>2.准备好html<span><div> <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>.banner { position: relative; overflow: auto; } .banner li { list-style: none; } .banner ul li { float: left; }</span>
4.调用 <span>$(function() { $(\'.banner\').unslider(); });</span>
参数介绍
$(\'.banner\').unslider({ speed: 500, // 动画的速度,没有过度效果时为 false (整型或布尔型) delay: 3000, // 幻灯片之间的延迟，没有自动播放时为false（整数或布尔） complete: function() {}, // 播放每张幻灯片后调用的函数 keys: true, // 允许键盘左右键控制 dots: true, // 显示点导航 fluid: false // 支持响应式设计 });自定义向前,向后链接<a href="#">前一张</a> <a href="#">后一张</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>/** * 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>\'; $.each(_.li, function(index) { html += \'<li>\' + ++index + \'</li>\'; }); html += \'</ol>\'; } else { html = \'<div>\' + 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>