甘肃龙网

  1. 首页 > 生活 > >

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

生活百科绑定


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

文章插图

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

文章插图
显示小图列表的方法是eg.(),单击小图要显示大图 ， 需要调用eg.()方法 ， 只有单击小图片时候响应单击事件才行 ， 所以需要用eg.()方法实现 ， 这个方法是一个跨浏览器绑定事件函数
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "").
JavaScript图片廊——实现点击小图片栏显示大图

文章插图
第二个参数是事件触发后调用的函数 。
第三个参数是个布尔值用于描述事件是冒泡还是捕获 。该参数是可选的 。
【JavaScript图片廊——实现点击小图片栏显示大图】//跨浏览器添加事件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);}}
以上绑定函数隐藏的性能问题在于每次函数调用时都会做重复工作——检测浏览器的类型 。这是比较消耗性能 ， 特别是你绑定大量事件 ， 反复调用的时候 。事实上 ， 这是不必要的 ， 我们只需要判断一次就行的了 。因为一旦页面加载完成后 ， 浏览器的类型已经是确定了的 ， 所以我们可以做个优化 ， 提前检测浏览器类型 ， 并把正确的操作函数赋值给一个变量
JavaScript图片廊——实现点击小图片栏显示大图

文章插图
//绑定事件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 = http://www.kingceram.com/post/[["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


上一篇：simon和melody差几岁

下一篇：三十、java版商城之移动商城楼层装修 Spring Cloud+SpringB