同事找帮忙需要写一个普通的焦点图，切换效果是渐变，默认不自动切换，图片有小点，点击小点可以切换图片。花了三个多小时写好，贴出来的目的是让那些开发jQuery插件的童鞋做个参考。

下载地址：http://www.qttc.net/static/file/plug/focus/201303_lee_plug.rar

用法：

1、先在页面中加载jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

2、解压插件压缩包后把文件夹上传到站点任意目录、并在页面中载入focus.js，如：

<script type="text/javascript" src="lee_plug/focus.js"></script>

3、使用

如页面元素有：

  <div class="demo">
   <img src="img/3.jpg" />
   <img src="img/1.jpg" />
   <img src="img/2.jpg" />
  </div>
 
  <div class="demo">
   <img src="img/1.jpg" />
   <img src="img/2.jpg" />
   <img src="img/3.jpg" />
   <img src="img/4.jpg" />
   <img src="img/5.jpg" />
  </div>

使用方法：

$('.demo').lee_focus({'height':400,'width':300});

参数说明：

height 焦点图高度

width  焦点图宽度

demo地址：http://www.qttc.net/static/demo/focus201303/

demo截图：

focus.js源码

/**
 * 李忠
 * 焦点图
 * 2013-03-11
 */
(function($) {
    $.fn.lee_focus = function(param){   
	// 默认高度
        var height = param.height || 200;	
	// 默认宽度
        var width = param.width || 100;	
	var _this = null;

	// jQuery的对象选择器是多个，所以这里使用each遍历每一个节点对象
	$(this).each(function(){

		// 把每一个节点对象赋给一个变量，这有助于程序效率
		_this = $(this);
		$('body').css({'margin':0,'padding':0});

		// 改变盒子大小 
		_this.css({'width':width+'px','height':height+'px','position':'relative','padding':0});
	

		var fock_png_width = 16; 			// png宽度(px)
		var fock_png_margin_sx = 8;			// png 小图标上下间距(px)
		var ul_height = fock_png_width+fock_png_margin_sx*2; // 底部黑条的高度(px)
		var box_height = _this.height();			
		var box_width = _this.width();
		var fock_png_margin_zy = 10;			// png 小图标左右间距
		var js=document.scripts;
		var speed = 500;
		var sper_url = '';				// js路径
		var sper_file_name = 'sper.png';		// png 文件名
		var last_index = 0;
		var lock = false;

		var objImg = _this.find('>img');		// 查找所有图片

		if(objImg.length==0){
			return false;	
		}else{
			var img_length = objImg.length;	
		}

		// 获取js文件路径 目的是为了使用png图片
		for(var i=js.length;i>0;i--){
			if(js[i-1].src.indexOf("lee_plug")>-1){
				sper_url=js[i-1].src.substring(0,js[i-1].src.lastIndexOf("/")+1)+sper_file_name;
			}
		}

		// 底部黑条		
		_this.append('<div style="position:absolute;top:'+(height-ul_height)+'px;background:#000;opacity:0.7;height:'+ul_height+'px;margin:0 auto;padding:0;width:100%;"></div>');

		// 创建小图标
		var html = '<ul style="position:absolute;top:'+(height-ul_height)+'px;height:'+ul_height+'px;margin:0 auto;padding:0;width:100%;opacity:0.7;">';
			for(var i=0;i<img_length;i++){
				$(objImg[i]).css({'width':'100%','height':'100%','position':'absolute','margin':0,'padding':0});
				if(i>=1){
					$(objImg[i]).hide();		
					var sper_weizhi = 0;
				}else{
					var sper_weizhi = '-'+fock_png_width+'px';	
				}

				var left = parseInt((box_width - img_length*(fock_png_width+fock_png_margin_zy*2)) /2) + i*(fock_png_width+fock_png_margin_zy);

				html += '<li style="display:block;position:absolute;width:'+fock_png_width+'px;height:'+fock_png_width+'px;background:url('+sper_url+') 0 '+sper_weizhi+' no-repeat;margin:0; padding:0;cursor:pointer; top:'+parseInt((ul_height-fock_png_width)/2)+'px;left:'+left+'px;"></li>';
			}
		html += '</ul>';

		_this.append(html);

		// 绑定单击事件
		_this.find('>ul>li').each(function(i){
			// 这里使用的js原生事件绑定，因为jQuery 的 click怎么闭包传入i没有弄明白，所以使用原生函数处理
			$(this).get(0).onclick = function(num,obj){
				return function(){
					if(num==last_index || lock){ return false; }
					lock = true;
					obj.find('>ul>li').each(function(i){
						$(this).css('background','url('+sper_url+') 0 0 no-repeat');				
					});
					obj.find('>ul>li:eq('+num+')').css('background','url('+sper_url+') 0 -'+fock_png_width+'px no-repeat');
					obj.find('>img:visible').fadeOut(speed);
					obj.find('>img:eq('+num+')').fadeIn(speed,function(){
						lock = false;
						last_index = num;	
					});
				}
			}(i,_this);	
		});

	});	

    };	    
 
})(jQuery);