初学选项卡，主要问题卡在了索引值上面，花了较长的时间学习。
索引值其实很好理解，就是为每一个元素用JS的方法添加一个属性，即自定义属性。
在for循环里的函数里用i，会直接弹出这个数组的length,而不是按照数组顺序走，这个原因我们会在学习作用域时学习到，现基于此问题，解决的方法就是为每一个元素添加一个自定义属性index，这个自定义属性一旦和数组匹配，就可以找到相应数组里的东西。
代码解释：aLi[i].index=i; //为每一个Li添加一个自定义属性index等于i，也就是说每一个li身上都会有一个数字
this.index; //当前的数字，第几个。。可以这样理解
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{background:#000;}
#pic{400px;height:500px;position:relative;margin:0 auto; background:url(img/loader_ico.gif) no-repeat center;}
#pic ul { 40px; position:absolute; top:0; right:-50px; }
#pic li { 40px; height:40px; margin-bottom:4px; background:#666;list-style:none; }
#pic .active { background:#FC3; }
#pic p{bottom:0;}
#pic span{display:block;top:0;}
#pic p,#pic span{background:#FFF;391px;height:50px;opacity:0.3;filter:alpha(opacity=30); text-align:center;line-height:50px; font-weight:bold;position:absolute; }
</style>
<script>
window.onload=function(){
var oDiv = document.getElementById('pic');
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=['图片1','图片2','图片3','图片4'];
var num=0;
for(var i=0;i<arrUrl.length;i++){
oUl.innerHTML += '<li></li>';
};
//初始化
function tab(){
oImg.src=arrUrl[num];
oSpan.innerHTML=1+num+'/'+arrText.length;
oP.innerHTML=arrText[num];
for(var i=0;i<aLi.length;i++){
aLi[i].className='';
};
aLi[num].className = 'active';
};
tab();
for(var i=0;i<aLi.length;i++){
aLi[i].index=i; //索引值 给每一个li添加了自定义属性index为i，它的作用是一旦和其他数组相匹配，就可以找到相应数组里的东西
aLi[i].onclick=function(){
num=this.index;
tab();
};
};
};
</script>
</head>
<body>
<div id="pic">
<img src="" alt="" width="390" height="480" />
<span>图片数量正在加载中</span>
<p>图片说明正在加载中</p>
<ul>
</ul>
</div>
</body>
</html>