js学习记录6 - 爱码网

js传递参数如下：

js学习记录6

以函数作为参数：函数无参数时：

js学习记录6

函数有参数时：

js学习记录6

以对象数位参数传递时：

js学习记录6

函数传进的参数类型判断：

js学习记录6

/*
	重用代码：
	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>

重用代码