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>

Unslider – 轻量的响应式 jQuery 内容轮播插件的更多相关文章

  1. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  2. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  3. flickity:支持触摸滑动,响应迅速的幻灯片轮播插件

    简介:flickity 是一个支持触摸,响应迅速的幻灯片轮播插件.支持环绕滑动.自由滑动.组滑动.自动播放.延迟加载.视差滑动.图片滑动.兼容IE10+, Android 4+, Safari for ...

  4. cssSlidy.js 响应式手机图片轮播

    cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"& ...

  5. 面板支持单个,多个元素的jQuery图片轮播插件

    一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  6. jquery图片轮播插件slideBox

    效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...

  7. 使用bootstrap建立响应式网页——通栏轮播图(carousel)

    1.bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...

  8. swiper.js 响应式多图轮播特效

    swiper.js实现响应式的左右切换图片案例展示布局 1.head引入css文件 <link type="text/css" rel="stylesheet&qu ...

  9. 关于Layui 响应式移动端轮播图的问题

    用layui做轮播图,在手机上宽度异常, 可通过以下方法解决, 不喜欢layui的同学可以选择Swiper // 轮播图 layui.use('carousel', function () { var ...

随机推荐

  1. J2SE知识点摘记(十五)

    1.        字节流和字符流的转换 以字符为导向的stream基本上有与之相对应的以字节为导向的Stream,两个对应类实现的功能相同,只是操作时的导向不同 字节输入流转换为字符输入流: Inp ...

  2. [虚拟化/云][全栈demo] 为qemu增加一个PCI的watchdog外设(一)

    目的: 结合现在比较流行的技术,通过一个demo 展示一个全栈式设计的各种技能. 一个全栈式的工程师,应该能设计通过verilog/VHDL做logical设计.能写内核驱动,能架站. 要熟悉veri ...

  3. [置顶] block一点也不神秘————如何利用block进行回调

    我们在开发中常常会用到函数回调,你可以用通知来替代回调,但是大多数时候回调是比通知方便的,所以何乐而不为呢?如果你不知道回调使用的场景,我们来假设一下: 1.我现在玩手机 2.突然手机没有电了 3.我 ...

  4. ruby简单的基础 5

    方法和代码块 在Ruby中.{}或do...end之间的代码是一个代码块.代码块只能出如今一个方法的后边,它紧接在方法最后一个參数的同一行上,一般由yieldkeyword调用代码块中的代码. 方法是 ...

  5. dom4j和jaxp解析工具的

    dom4j解析中的几个对象 node --branch --document --element --commment --attribute --text branch --document --e ...

  6. Objective-C内存管理教程和原理剖析(三)

    初学Objective-C的朋友都有一个困惑,总觉得对Objective-C的内存管理机制琢磨不透,程 序经常内存泄漏或莫名其妙的崩溃.我在这里总结了自己对Objective-C内存管理机制的研究成果 ...

  7. swift论坛正式上线

    www.iswifting.com swift论坛正式上线.有问答专区,也有技术分享区,还有学习资料区,大家一起学习成长! 2014中国互联网大会于8月26日开幕. 政府主管部门.行业专家.企业领袖将 ...

  8. JavaScript之面向对象学习二(原型属性对象与in操作符)获取对象中所有属性的方法

    1.原型属性对象于in操作符之in单独使用 有两种方式使用in操作符:单独使用和在for-in循环中使用.在单独使用中,代码如下: function Person(){ } Person.protot ...

  9. html中radio,checkbox值的获取、赋值、注册事件

    1,radio分组 只要name一样,就是一组的,即一组中只能选择一个,如下: 代码如下: <span>group1:</span> <input type=" ...

  10. jQuery获取Select选择的Text(非表单元素)和 Value(表单元素)(转)

    jQuery获取Select选择的Text和Value: 语法解释: . $("#select_id").change(function(){//code...}); //为Sel ...