传参实现两组图片轮播

Question

window.onload = function (){   
	fnTab( 'pic1', [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ], [ '小宠物', '图片二', '图片三', '面具' ], 'onclick' );    
	fnTab( 'pic2', [ 'img/2.png', 'img/3.png', 'img/4.png' ], [ '图片二', '图片三', '面具' ], 'onmouseover' );    
};    
function fnTab( id, arrUrl, arrText, evt ){    
	var oDiv = document.getElementById(id);    
	var oImg = oDiv.getElementsByTagName('img')[0];    
	var oSpan = oDiv.getElementsByTagName('span')[0];    
	var oP = oDiv.getElementsByTagName('p')[0];    
	var oUl = oDiv.getElementsByTagName('ul')[0];    
	var aLi = oUl.getElementsByTagName('li');    
	var num = 0;    
	for( var i=0; i<arrUrl.length; i++ ){    
		oUl.innerHTML += '<li></li>';    
	}    
	// 初始化    
	function fnTab(){    
		oImg.src = arrUrl[num];    
		oSpan.innerHTML = 1+num+' / '+arrUrl.length;    
		oP.innerHTML = arrText[num];    
		for( var i=0; i<aLi.length; i++ ){    
			aLi[i].className = '';    
		}    
		aLi[num].className = 'active';    
	}    
	fnTab();    
	for( var i=0; i<aLi.length; i++ ){    
		aLi[i].index = i;			// 索引值    
		aLi[i][evt] = function (){    
			num = this.index;    
			fnTab();    
		};    
	}    
}     
div id="pic1" class="box">    
	<img src="" />    
<span>数量正在加载中……</span>    
<p>文字说明正在加载中……</p>    
<ul></ul>    
</div>    
<div id="pic2" class="box">    
	<img src="" />    
<span>数量正在加载中……</span>    
<p>文字说明正在加载中……</p>    
<ul></ul>    
</div>