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

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

element.addEventListener(event, function, useCapture);

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

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

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

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

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

//绑定事件
var addHandler = document.body.addEventListener ?function(target, eventType, handler) { //DOM2target.addEventListener(eventType, handler,false);} :function(target, eventType, handler) { //IEtarget.attachEvent("on" + eventType, handler);};//移除事件
var removeHandler = document.body.removeEventListener ?function(target, eventType, handler) { //DOM2target.removeEventListener(eventType, handler, false);} :function(target, eventType, handler) { //IEtarget.detachEvent("on" + eventType, handler);}

响应小照片单击动作代码，需要使用一个闭包，即一个自调用匿名函数。((){})()是最简单的闭包，大括号中的内容会顺序执行，如果去掉闭包，会发现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 = '';(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();