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

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

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(){}