3.3 响应鼠标动作

图3-2的效果已经有了，需要鼠标来操作展示想看的照片，这就需要在相应的地方加上事件。

3.3.1 响应小照片单击动作

前面的【范例3-3】里提供了显示小图列表的eg.showThumb()方法，在单击小图片时要显示大图片，这需要调用eg.showBig()方法，只有在单击小图片的时候响应单击事件才行，所以需要用eg.addListener()方法来实现，具体代码见【范例3-4】。

【范例3-4 响应小照片单击动作】

    1.      eg.showThumb = function(group){
    2.               var ul = eg.$("smallPhotosList");
    3.              ul.innerHTML = '';                           //每次显示时要清空旧的内容
    4.              var start = (group-1)*eg.groupSize;      //计算需要的data数据的开始位置
    5.              var end = group*eg.groupSize               //计算需要的data数据的结束位置
    6.               for(var i=start; (i<end&&i<eg.data.length); i++){
    7.                       var li = document.createElement("li");
    8.                       li.innerHTML  ='<img  src  =  "'+eg.data[i][1]+'"id="thumb'+i+
                        '"width ="80" height="40"/>';
    9.                       (function(i){
    10.                              eg.addListener(li, "click", function(){
                                      //增加click 事件监听
    11.                                       eg.showNumber = i;
                                      //记录选中的图标序号，供其他函数调用
    12.                                       eg.showBig();
    13.                              });
    14.                     })(i);                         //将i 作为值传递进去
    15.                      ul.appendChild(li);
    16.             }
    17.     };
    18.    eg.showBig = function(){                            //根据某个编号显示大图
    19.             eg.$("bigPhotoSrc").src = eg.$("thumb"+eg.showNumber).src.
                  replace("thumb", "photo");
    20.     };

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

3.3.2 响应小照片上一组或下一组单击动作

响应小照片上一组或下一组单击动作的代码如【范例3-5】所示。

【范例3-5 响应小照片上一组或下一组单击动作】

    1.      eg.init = function(){
    2.              eg.showThumb(1);                             //初始化要显示的
    3.               eg.addListener(eg.$("next"), "click", function(){
    4.                       eg.nextThumb();
    5.               });
    6.               eg.addListener(eg.$("prve"), "click", function(){
    7.                       eg.prveThumb();
    8.               });
    9.      };
    10.    eg.nextThumb = function(){                         //显示下一组小图列表
    11.             if((eg.groupNumber*eg.groupSize) +1 <= eg.data.length){
    12.                      eg.showThumb(eg.groupNumber+1);
    13.                      eg.showNumber = eg.groupNumber*eg.groupSize;
    14.                      eg.showBig();
    15.                      eg.groupNumber++;
    16.             }
    17.     };
    18.    eg.prveThumb = function(){                         //显示上一组小图列表
    19.             if(eg.groupNumber - 1>=1){
    20.                      eg.showThumb(eg.groupNumber-1);
    21.                      eg.groupNumber--;
    22.                      eg.showNumber = eg.groupNumber*eg.groupSize-eg.groupSize;
    23.                      eg.showBig();
    24.             }
    25.     };

eg.prveThumb和eg.nextThumb分别是上一组和下一组的逻辑控制函数。写好这两个函数后，还要将eg.init绑定到鼠标事件onclick上。

上一章目录下一章