unslider.js 是一款小巧的响应式轮播图插件 官网 http://unslider.com/
unslider.js
/**
* Unslider by @idiot and @damirfoy
* Contributors:
* - @ShamoX
* http://unslider.com/
*/
(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 dots pagination (boolean)
thumbs: f, // display thumbs 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) + '%'});
if(o.fluid) {
li.css({'float': 'left', width: (100 / len) + '%'});
} else {
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');
//thumb pagination
o.thumbs && nav('thumb');
// 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);
li.css({ width: width + 'px' });
}, 50);
}).resize();
};
// Move support
if ($.event.special['move'] || $.Event('move')) {
el.on('movestart', function(e) {
if ((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) {
e.preventDefault();
}else{
el.data("left", _.ul.offset().left / el.width() * 100);
}
}).on('move', function(e) {
var left = 100 * e.distX / el.width();
var leftDelta = 100 * e.deltaX / el.width();
_.ul[0].style.left = parseInt(_.ul[0].style.left.replace("%", ""))+leftDelta+"%";
_.ul.data("left", left);
}).on('moveend', function(e) {
var left = _.ul.data("left");
if (Math.abs(left) > 30){
var i = left > 0 ? _.i-1 : _.i+1;
if (i < 0 || i >= len) i = _.i;
_.to(i);
}else{
_.to(_.i);
}
});
};
return _;
};
// Move Unslider to a slide index
_.to = function(index, callback) {
// console.log("b:"+index);
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');
//Handle those thumbs
el.find('.thumb').eq(index).addClass('active1').siblings().removeClass('active1');
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 and thumb
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 if(name == 'thumb'){ //可在这里生成 html 标签，也可在页面中直接添加
html = '<ol class="thumbs">';
$.each(_.li, function(index) {
html += '<li class="' + (index == _.i ? name + ' active1' : name) + '">' + '<img src="img/'+(index+1)+'.jpg" width="100" height="100" />' + '</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();
me.hasClass('dot')?_.stop().to(me.index()):(me.hasClass('thumb')?_.stop().to(me.index()):(me.hasClass('prev') ? _.prev() : _.next()));
// if(me.hasClass('dot')){
// _.stop().to(me.index());
// }else{
// if(me.hasClass('thumb')){
// _.stop().to(me.index());
// }else{
// 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);
调用
<!-- example -->
<div class="banner">
<ul>
<li style="background-image: url('img/sunset.jpg');">
<div class="inner">
<h1>jQuery滑块,幻灯片。</h1>
<p>没有花哨的效果或不必要的标记,不到3 kb。</p>
<a class="btn" href="#download">Download</a>
</div>
</li>
<li style="background-image: url('img/wood.jpg');">
<div class="inner">
<h1>流体、灵活异常最小。</h1>
<p>在幻灯片中使用任何HTML,延长使用CSS。你能完全控制。</p>
<a class="btn" href="#download">Download</a>
</div>
</li>
<li style="background-image: url('img/subway.jpg');">
<div class="inner">
<h1>开源</h1>
<p>Unslider 源码 在 GitHub 上.</p>
<a class="btn" href="//github.com/idiot/unslider">Contribute</a>
</div>
</li>
<li style="background-image: url('img/shop.jpg');">
<div class="inner">
<h1>这个由背景图做幻灯片</h1>
<p>这样可直接在每个幻灯片上添加不同内容及按钮等你需要的东东。</p>
<a class="btn" href="#download">Download</a>
</div>
</li>
</ul>
<!-- 添加缩略图 也可在js中生成
<ol class="thumbs">
<li class="thumb active1"><img src="img/1.jpg" width="100" height="100"></li>
<li class="thumb"><img src="img/2.jpg" width="100" height="100"></li>
<li class="thumb"><img src="img/3.jpg" width="100" height="100"></li>
<li class="thumb"><img src="img/4.jpg" width="100" height="100"></li>
</ol>
-->
</div>
<!-- 添加 previous/next links -->
<!-- <a href="#" class="unslider-arrow prev">Previous slide</a>
<a href="#" class="unslider-arrow next">Next slide</a> -->
<!-- /example -->
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/unslider.js"></script>
<script type="text/javascript">
$(function(){
$(".banner").unslider(
{
dots:true,
thumbs:true,
arrows:true,
keys: true
});
/**
var unslider = $('.banner').unslider();
$('.unslider-arrow').click(function() {
var fn = this.className.split(' ')[1];
console.log(fn);
// 要么做unslider.data(unslider). next()或.prev()根据类名
unslider.data('unslider')[fn]();
});
// var unslider = $('.banner1').unslider();
*/
})
</script>
css
.banner .thumbs{
position: absolute;
left: 0;
right: 0;
top: 50px;
width: 100%;
height: 80px;
}
.banner .thumbs li {
display: inline-block;
*display: inline;
zoom: 1;
width: 80px;
height: 80px;
line-height: 80px;
margin: 4px 4px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.banner .thumbs li.active1 {
background: #fff;
opacity: 1;
}
.banner .thumbs li img{
width: 80px;
height: 80px;
}