JavaScript图片廊——实现点击小图片栏显示大图

 显示小图列表的方法是eg.showThumb(),单击小图要显示大图，需要调用eg.showBig()方法，只有单击小图片时候响应单击事件才行，所以需要用eg.addListenner()方法实现，这个方法是一个跨浏览器绑定事件函数

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

//跨浏览器添加事件
function addHandler(target, eventType, handler) {
　　if(target.addEventListener) { //DOM2 events
　　　　target.addEventListener(eventType, handler, false);
　　} else { //IE
　　　　target.attachEvent("on" + eventType, handler);
　　}
}
 
//跨浏览器移除事件
function removeHanler(target, eventType, handler) {
　　if(target.removeEventListener) { //DOM2 events
　　　　target.removeEventListener(eventType, handler, false);
　　} else { //IE
　　　　target.detachEvent("on", eventType, handler);
　　}
}

以上绑定函数隐藏的性能问题在于每次函数调用时都会做重复工作——检测浏览器的类型。这是比较消耗性能，特别是你绑定大量事件，反复调用的时候。事实上，这是不必要的，我们只需要判断一次就行的了。因为一旦页面加载完成后，浏览器的类型已经是确定了的，所以我们可以做个优化，提前检测浏览器类型，并把正确的操作函数赋值给一个变量

//绑定事件
var addHandler = document.body.addEventListener ?
　　　　　　　　　　function(target, eventType, handler) { //DOM2
　　　　　　　　　　　　target.addEventListener(eventType, handler,false);
　　　　　　　　　　} :
　　　　　　　　　　function(target, eventType, handler) { //IE
　　　　　　　　　　　　target.attachEvent("on" + eventType, handler);
　　　　　　　　　　};

//移除事件
var removeHandler = document.body.removeEventListener ?
　　　　　　　　　　　　function(target, eventType, handler) { //DOM2
　　　　　　　　　　　　　　target.removeEventListener(eventType, handler, false);
　　　　　　　　　　　　} :
　　　　　　　　　　　　function(target, eventType, handler) { //IE
　　　　　　　　　　　　　　target.detachEvent("on" + eventType, handler);
　　　　　　　　　　　　}

响应小照片单击动作代码，需要使用一个闭包，即一个自调用匿名函数。(function(){})()是最简单的闭包，大括号中的内容会顺序执行，如果去掉闭包，会发现shi始终显示当前组照片中最后一个，在for循环中一般要用闭包把变量值传到内部绑定事件里

(function(i){
			eg.addListener(li,"click",function(){
				//增加click事件监听
				eg.showNumber = i;
				//记录选中的图标序号，供其他函数调用
				eg.showBig();
			});
		})(i);   //将i作为值传递进去

完整js代码

var eg = {};
eg.$ = function(id) {
	return document.getElementById(id);
};

//跨浏览器添加事件
eg.addListener = function(target,type,handler){
		if(target.addEventListener){
			target.addEventListener(type,handler,false);
		}else if(target.attachEvent){
			target.attachEvent("on"+type,handler);
		}else{
			target["on"+type]=handler;
		}
	};

//定义数据
eg.data = [
	["img/photo01.jpg", "img/1.jpg"],
	["img/photo02.jpg", "img/2.jpg"],
	["img/photo03.jpg", "img/3.jpeg"],
	["img/photo04.jpg", "img/4.jpeg"],
	["img/photo05.jpg", "img/5.jpg"],
	["img/photo06.jpg", "img/6.png"],
	["img/photo07.jpg", "img/7.jpg"],
];

eg.showNumber = 0     //默认显示
eg.groupNumber = 1  //当前显示的组
eg.groupSize = 3; //每组的数量
eg.showThumb = function(group) {
	var ul = eg.$("smallPhotosList");
	ul.innerHTML = ''; //每次显示时清空旧的内容
	var start = (group - 1) * eg.groupSize; //计算需要的data数据开始位置
	var end = group * eg.groupSize; //计算需要的data数据开始位置
	for(var i = start;
		(i < end && i < eg.data.length); i++) {
		//循环数据，并根据数据生成html后插入小图列表中
		var li = document.createElement("li");
		li.innerHTML = '<img src="' + eg.data[i][1] + '" id="thumb' + i + '" width="80" height="40"/>';
		(function(i){
			eg.addListener(li,"click",function(){
				//增加click事件监听
				eg.showNumber = i;
				//记录选中的图标序号，供其他函数调用
				eg.showBig();
			});
		})(i);   //将i作为值传递进去
		ul.appendChild(li); //追加元素
	}
};
eg.showBig = function(){
	eg.$("bigPhotoSrc").src = eg.$("thumb"+eg.showNumber).src.replace("thumb","photo");
};

eg.init = function() {
	eg.showThumb(1); //初始化显示内容
};
eg.init();