js基礎——圖片切換實例(函數傳參)

CSS部分：

ul { padding:0; margin:0; }
li { list-style:none; }
body { background:#fff; }
.box{ width: 400px; height: 500px;/* margin:0 auto; */ float: left; margin-right: 60px; background:#fff url(img/loader_ico.gif) center no-repeat; position: relative;}
.box img{ width: 400px; height: 500px;}
.box ul{ width: 40px; position: absolute; top: 0; right: -50px;}
.box li{ width: 40px; height: 40px; margin-bottom: 5px; background: #ccc;}
.box .active{ background: #f90;}
.box span ,.box p{ width: 400px; height: 30px; line-height: 30px; text-align: center; color: #fff; background: #000; position: absolute; left: 0;}
.box span{ top: 0;}
.box p{ bottom: 0; margin:0;}

HTML部分：

<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>
		<!-- <li class="active"></li>
		<li></li>
		<li></li>
		<li></li> -->
	</ul>
</div>

JS部分：

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 arrUrl = ['img/1.png','img/2.png','img/3.png','img/4.png'];
	// var arrText = ['圖片一','圖片二','圖片三','圖片四'];
	var num = 0;
	
	//遍歷生成所有li
	for(var i =0; i<arrUrl.length; i++){
		oUl.innerHTML += '<li></li>';	
	}
	
	//初始化函數
	function init(){
		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';	
	};
	init();
	
	//點擊按鈕切換圖片
	for( var i=0; i<aLi.length; i++ ){

		// 爲每個li添加索引值
		aLi[i].index = i;	

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

			// 將當前點擊的索引值賦給num
			num = this.index;

			// 然後執行切換函數
			init();
		};
	}
};

預覽效果：

重用代碼：
1、儘量保證 HTML 代碼結構一致，可以通過父級選取子元素
2、把核心主程序實現，用函數包起來
3、把每組裏不同的值找出來，通過傳參實現