上周主要借用之前的这个图片切换实例练习了一下，函数传参的用法，这个例子蛮简单的，很好理解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片切换实例</title>
<style>
ul{margin:0;padding:0;}
li{list-style:none;}
body{background:#333;}
.box{400px;height:500px;position:relative;float:left;margin-right:120px;}
.box img{400px;height:500px;}
.box ul{40px;position:absolute;top:0;right:-50px;}
.box li{40px;height:40px;margin-bottom:4px;background:#999;}
.box li.active{background:#fc3;}
.box span,.box p{position:absolute;left:0;400px;height:30px;line-height:30px;text-align:center;color:#fff;margin:0;background:#000;}
.box span{top:0;}
.box p{bottom:0;}
</style>
</head>
<body>
<div id="pic1" class="box">
<img src="img/1.jpg" alt="" id="img1">
<span>数量正在加载中</span>
<p>文字说明正在加载中.....</p>
<ul>
</ul>
</div>
<div id="pic2" class="box">
<img src="img/1.jpg" alt="" id="img1">
<span>数量正在加载中</span>
<p>文字说明正在加载中.....</p>
<ul>
</ul>
</div>
</body>
</html>
<script>
window.onload=function(){
fnTab('pic1',['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'],['图一说明','图二说明','图三说明','图四说明'],'onclick');
fnTab('pic2',['img/2.jpg','img/3.jpg','img/4.jpg'],['图二说明','图三说明','图四说明'],'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 fn(){
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';
}
fn();
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i][evt]=function(){
num=this.index;
fn();
}
}
}
</script>