js传递参数如下:
以函数作为参数:函数无参数时:
函数有参数时:
以对象数位参数传递时:
函数传进的参数类型判断:
/* | |
重用代码: | |
1、尽量保证 HTML 代码结构一致,可以通过父级选取子元素 | |
2、把核心主程序实现,用函数包起来 | |
3、把每组里不同的值找出来,通过传参实现 | |
*/ | |
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(); | |
}; | |
} | |
} | |
</script> | |
</head> | |
<body> | |
<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> | |
</body> | |
重用代码 |