unslider.js 添加缩略图功能

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;
	}