javascript：第五章 函数传参 例子

重用代码--传参的步骤：

1、尽量保证 HTML 代码结构一致，可以通过父级选取子元素

2、把核心主程序实现，用函数包起来

3、把每组里不同的值找出来，通过传参实现

*/

window.onload = function (){

fnTab( 'pic1', [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ], [ '小宠物', '图片二', '图片三', '面具' ], ' );

fnTab( 'pic2', [ 'img/2.png', 'img/3.png', 'img/4.png' ], [ '图片二', '图片三', '面具' ], ' );

};

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

oUl.innerHTML += '

}

// 初始化

function fnTab(){

oImg.src = arrUrl[num];

oSpan.innerHTML = 1+num+' / '+arrUrl.length;

oP.innerHTML = arrText[num];

for( var i=0; i

aLi[i].className = '';

}

aLi[num].className = 'active';

}

fnTab();

for( var i=0; i

aLi[i].index = i;// 索引值

aLi[i][evt] = function (){

num = this.index;

fnTab();

};

}

}