鉴于for循环的重要性，今天再来回顾下什么时候想到使用for循环：
1、重复执行某些代码；2、每次执行的时候有个数字在变化；
说道代码简化，函数合并
这里要去观察自己的代码，当发现自己写的代码，在功能上存在相似的代码段时，看看他们能不能合并
也就是函数的使用思想，就是被用来重复调用；让程序的整体代码变得简洁；
和合并的过程中，注意调试效果，看看有没有影响到原来效果的执行；
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 ul { padding:0; margin:0; } 8 li { list-style:none; } 9 body { background:#333; } 10 #pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; } 11 #pic img { width:400px; height:500px; } 12 #pic ul { width:40px; position:absolute; top:0; right:-50px; } 13 #pic li { width:40px; height:40px; margin-bottom:4px; background:#666; } 14 #pic .active { background:#FC3; } 15 #pic span { top:0; } 16 #pic p { bottom:0; margin:0; } 17 #pic p,#pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; } 18 </style> 19 20 </head> 21 22 <body> 23 24 <div id="pic"> 25 <img src="" /> 26 <span>数量正在加载中……</span> 27 <p>文字说明正在加载中……</p> 28 <ul></ul> 29 </div> 30 <script type="text/javascript"> 31 var oDiv = document.getElementById('pic'); 32 var oImg = oDiv.getElementsByTagName('img')[0]; 33 var oSpan = oDiv.getElementsByTagName('span')[0]; 34 var oP = oDiv.getElementsByTagName('p')[0]; 35 var oUl = oDiv.getElementsByTagName('ul')[0]; 36 var aLi = oUl.getElementsByTagName('li'); 37 38 var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ]; 39 var arrText = [ '小宠物', '图片二', '图片三', '面具' ]; 40 var num = 0; 41 42 for( var i=0; i<arrUrl.length; i++ ){ 43 oUl.innerHTML += '<li></li>'; 44 } 45 46 function fnTab(){ 47 // 初始化 48 oImg.src = arrUrl[num]; 49 oSpan.innerHTML = 1+num+' / '+arrUrl.length; 50 oP.innerHTML = arrText[num]; 51 for(var j=0; j<arrUrl.length; j++){ 52 53 aLi[j].className = ''; 54 //这里的for循环，是为了合并同样的代码段而添加出来的，本身这个步奏没有多大意义 55 } 56 aLi[num].className = 'active'; 57 58 } 59 fnTab(); // 函数需要调用才会执行； 60 61 for( var i=0 ;i<aLi.length; i++){ 62 aLi[i].index = i; // 建立索引值要放到点击事件的外部，否则是无法发生作用的； 63 aLi[i].onclick = function(){ 64 65 num = this.index // 观察跟上面的代码段，发现这个this.index跟num的值是一样的，所以把this.index的值赋给num，下面的代码段几乎就跟初始化一样了 66 fnTab(); 67 } 68 } 69 70 </script> 71 </body> 72 </html>