页面中多组切换按钮— 事件不同

左边是点击事件，右边是鼠标移入移出。
如果事件不同（一个是点击事件、一个是鼠标滑动事件），也是在函数调用时传入参数。

html、css和上篇文章一样，这里就不重复。
js：

window.onload = function(){             fnTab('pic1',['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'],['海上帆船','小台灯','椰子树','照相机'],'onclick');//鼠标点击事件    fnTab('pic2',['img/2.jpg','img/3.jpg','img/4.jpg'],['小台灯','椰子树','照相机'],'onmouseover');//鼠标移入移出事件}   function fnTab(id,arrUrl,arrTxt,evt){    // 找元素    var pic = document.getElementById(id);//参数不需要加引号，只有字符串添加引号    var imgs = pic.getElementsByTagName('img')[0];    var lis = pic.getElementsByTagName('li')[0];    var txt = pic.getElementsByTagName('p')[0];    var spans= pic.getElementsByTagName('span')[0];    var uls = pic.getElementsByTagName('ul')[0];    var lis = uls.getElementsByTagName('li');//找到页面中的li元素,li元素是往里面塞进去的    // 准备数据    // 放到参数里了       var num = 0;//有数组的地方一般都有数字，因为图片地址配合数字就能找到文字描述    // 插入标签    for(var i=0;i<arrUrl.length;i++){        uls.innerHTML += '<li></li>';//往Ul里添加li就要写成+=，如果是改写就直接写成等号     }    // 初始化，要先插入标签再初始化，顺序不要颠倒，否则会出错    imgs.src = arrUrl[num];//显示第一张图片    spans.innerHTML = num+1+'/'+arrUrl.length;//显示上面总张数（自动获取总数）    txt.innerHTML = arrTxt[num];                lis[num].className = 'active';//给当前的li添加类名              // 给li添加点击事件，循环li    for(var i=0;i<lis.length;i++){          lis[i].index = i;//自定义属性又叫索引值        lis[i][evt] = function(){                               // 点击任何一个li都要去匹配数组中的图片路径，这种对应关系要用自定义属性            //alert(this.index);//弹出所点击的li的数字，从0开始            // 我们要把点击的数字和数组中图片路径相匹配出来            imgs.src = arrUrl[this.index];//图片路径匹配所点击的li元素            txt.innerHTML = arrTxt[this.index];//文字描述匹配所点击的li元素            spans.innerHTML = this.index+1+'/'+arrUrl.length;            // 按钮的颜色随着鼠标点击来移动            // 思路一：全部清空，当前添加（全部清除，如果按钮多的话，这个方法不太好）            for(var i=0;i<lis.length;i++){                lis[i].className = '';            }            this.className = 'active';        };                  }}

如果函数相同，事件不同的话，那么就不能用点onclick例如：
lis[i].onclick = function(){}
应该改成中括号包起来。lis[i][evt] = function(){}