一个简单实用的jquery轮播插件

原文链接http://www.jq22.com/jquery-info385

注释很详细  思路也很清晰  普遍适用于大部分的轮播

(function($) {
			$.fn.slideBox = function(options) {
				//默认参数
				var defaults = {
					direction: 'left', //left,top
					duration: 0.6, //unit:seconds
					easing: 'swing', //swing,linear
					delay: 3, //unit:seconds
					startIndex: 0,
					hideClickBar: true,
					clickBarRadius: 5, //unit:px
					hideBottomBar: false,
					width: null,
					height: null
				};
				var settings = $.extend(defaults, options || {});
				//计算相关数据
				var wrapper = $(this),
					ul = wrapper.children('ul.items'),
					lis = ul.find('li'),
					firstPic = lis.first().find('img');
				var li_num = lis.size(),
					li_height = 0,
					li_width = 0;
				//定义滚动顺序:ASC/DESC.ADD.JENA.201208081718
				var order_by = 'ASC';
				//初始化
				var init = function() {
					if(!wrapper.size()) return false;
					//手动设定值优先.ADD.JENA.201303141309
					li_height = settings.height ? settings.height : lis.first().height();//每个li的宽高设置
					li_width = settings.width ? settings.width : lis.first().width();//每个li的宽高设置

					wrapper.css({ width: li_width + 'px', height: li_height + 'px' });//显示的Box的宽高也就是li的宽高
					lis.css({ width: li_width + 'px', height: li_height + 'px' }); //ADD.JENA.201207051027

					if(settings.direction == 'left') {
						ul.css('width', li_num * li_width + 'px');//显示的Ul的宽高也就是li的宽高*li的个数
					} else {
						ul.css('height', li_num * li_height + 'px');
					}
					ul.find('li:eq(' + settings.startIndex + ')').addClass('active');

					if(!settings.hideBottomBar) { //ADD.JENA.201208090859    +++++++++显示下面的小图标
						var tips = $('<div class="tips"></div>').css('opacity', 0.6).appendTo(wrapper);//bottom一个元素
						var title = $('<div class="title"></div>').html(function() {
							var active = ul.find('li.active').find('a'),
								text = active.attr('title'),
								href = active.attr('href');
							return $('<a>').attr('href', href).text(text);
						}).appendTo(tips);//设置一个显示的时候的标题以及链接
						var nums = $('<div class="nums"></div>').hide().appendTo(tips);//小按钮  tips
						lis.each(function(i, n) {
							var a = $(n).find('a'),
								text = a.attr('title'),
								href = a.attr('href'),
								css = '';
							i == settings.startIndex && (css = 'active');
							$('<a>').attr('href', href).text(text).addClass(css).css('borderRadius', settings.clickBarRadius + 'px').mouseover(function() {
								$(this).addClass('active').siblings().removeClass('active');
								ul.find('li:eq(' + $(this).index() + ')').addClass('active').siblings().removeClass('active');
								start();
								stop();
							}).appendTo(nums);
						});

						if(settings.hideClickBar) { //ADD.JENA.201206300847+++++++++++++隐藏小圆点
							tips.hover(function() {
								nums.animate({ top: '0px' }, 'fast');
							}, function() {
								nums.animate({ top: tips.height() + 'px' }, 'fast');
							});
							nums.show().delay(2000).animate({ top: tips.height() + 'px' }, 'fast');
						} else {
							nums.show();//显示小圆点
						}
					}

					lis.size() > 1 && start();
				}
				//开始轮播
				var start = function() {
					var active = ul.find('li.active'),//active的li
						active_a = active.find('a');//active的a
					var index = active.index();//获取第几个class是active
					if(settings.direction == 'left') {
						offset = index * li_width * -1;//距离左边的距离
						param = { 'left': offset + 'px' };//参数设置left
					} else {
						offset = index * li_height * -1;//距离顶部的位置
						param = { 'top': offset + 'px' };//参数设置top
					}

					wrapper.find('.nums').find('a:eq(' + index + ')').addClass('active').siblings().removeClass('active');//处理小tip
					wrapper.find('.title').find('a').attr('href', active_a.attr('href')).text(active_a.attr('title'));//处理小tip的 变化

					ul.stop().animate(param, settings.duration * 1000, settings.easing, function() {
						active.removeClass('active');
						if(order_by == 'ASC') {//默认标记
							if(active.next().size()) {
								active.next().addClass('active');//如果下一个存在就添加class
								
							} else {
								order_by = 'DESC';//设置个标记
								active.prev().addClass('active');//如果下一个不存在就在前一个添加class
							}
						} else if(order_by == 'DESC') {//标记反向移动
							if(active.prev().size()) {
								active.prev().addClass('active');
							} else {
								order_by = 'ASC';
								active.next().addClass('active');
							}
						}
					});
					wrapper.data('timeid', window.setTimeout(start, settings.delay * 1000));//动起来
				};
				//停止轮播
				var stop = function() {
					window.clearTimeout(wrapper.data('timeid'));
				};
				//鼠标经过事件
				wrapper.hover(function() {
					stop();
				}, function() {
					//回调函数    离开后继续轮播
					wrapper.data('timeid', window.setTimeout(start, settings.delay * 1000))
				});
				//首张图片加载完毕后执行初始化
				var imgLoader = new Image();
				imgLoader.onload = function() {
					imgLoader.onload = null;
					init();
				}
				imgLoader.src = firstPic.attr('src');

			};
		})(jQuery);