标签：
这里已经实现了图片的切换功能，注意思路还是利用自定义属性当做桥梁，来变换匹配的对应元素；
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 <script> 20 window.onload = function (){ 21 var oDiv = document.getElementById(‘pic‘); 22 var oImg = oDiv.getElementsByTagName(‘img‘)[0]; 23 var oSpan = oDiv.getElementsByTagName(‘span‘)[0]; 24 var oP = oDiv.getElementsByTagName(‘p‘)[0]; 25 var oUl = oDiv.getElementsByTagName(‘ul‘)[0]; 26 var aLi = oUl.getElementsByTagName(‘li‘); 27 28 var arrUrl = [ ‘img/1.png‘, ‘img/2.png‘, ‘img/3.png‘, ‘img/4.png‘ ]; 29 var arrText = [ ‘小宠物‘, ‘图片二‘, ‘图片三‘, ‘面具‘ ]; 30 var num = 0; 31 var oldLi = null; 32 33 for( var i=0; i<arrUrl.length; i++ ){ 34 oUl.innerHTML += ‘<li></li>‘; 35 } 36 oldLi = aLi[num]; 37 38 // 初始化 39 oImg.src = arrUrl[num]; 40 oSpan.innerHTML = 1+num+‘ / ‘+arrUrl.length; 41 oP.innerHTML = arrText[num]; 42 aLi[num].className = ‘active‘; 43 44 for( var i=0; i<aLi.length; i++ ){ 45 aLi[i].index = i; // 索引值 46 aLi[i].onclick = function (){ 47 oImg.src = arrUrl[ this.index ]; 48 oP.innerHTML = arrText[ this.index ]; 49 oSpan.innerHTML = 1+this.index + ‘ / ‘+arrText.length; 50 51 /* 52 <li class="active"></li> 53 <li></li> 54 <li></li> 55 <li></li> 56 */ 57 58 // 思路一：全部清空，当前添加 59 for( var i=0; i<aLi.length; i++ ){ 60 aLi[i].className = ‘‘; 61 } 62 this.className = ‘active‘; 63 64 /* 65 // 思路二：清空上个，当前添加 66 oldLi.className = ‘‘; 67 oldLi = this; 68 this.className = ‘active‘; 69 */ 70 }; 71 } 72 }; 73 </script> 74 </head> 75 76 <body> 77 78 <div id="pic"> 79 <img src="" /> 80 <span>数量正在加载中……</span> 81 <p>文字说明正在加载中……</p> 82 <ul></ul> 83 </div> 84 85 </body> 86 </html>
这里要提到的一点就是：
这里的 this.index 其实就可以看成是一个数字，只不过是动态的数字罢了，要理解本质；
还有就是一定要动手实操，哪怕是照着原来的代码敲一遍，（实操可以抵御瞌睡、发现问题、增强记忆和理解）
这里实际操作就发现一个问题：
aLi[i].index = i; // 建立索引值要放到点击事件的外部，否则是无法发生作用的；这个应该跟后面的作用域相关
自己敲的js
1 <script type="text/javascript"> 2 var oDiv = document.getElementById(‘pic‘); 3 var oImg = oDiv.getElementsByTagName(‘img‘)[0]; 4 var oSpan = oDiv.getElementsByTagName(‘span‘)[0]; 5 var oP = oDiv.getElementsByTagName(‘p‘)[0]; 6 var oUl = oDiv.getElementsByTagName(‘ul‘)[0]; 7 var aLi = oUl.getElementsByTagName(‘li‘); 8 9 var arrUrl = [ ‘img/1.png‘, ‘img/2.png‘, ‘img/3.png‘, ‘img/4.png‘ ]; 10 var arrText = [ ‘小宠物‘, ‘图片二‘, ‘图片三‘, ‘面具‘ ]; 11 var num = 0; 12 13 for( var i=0; i<arrUrl.length; i++ ){ 14 oUl.innerHTML += ‘<li></li>‘; 15 } 16 17 18 // 初始化 19 oImg.src = arrUrl[num]; 20 oSpan.innerHTML = 1+num+‘ / ‘+arrUrl.length; 21 oP.innerHTML = arrText[num]; 22 aLi[num].className = ‘active‘; 23 24 for( var i=0 ;i<aLi.length; i++){ 25 aLi[i].index = i; // 建立索引值要放到点击事件的外部，否则是无法发生作用的； 26 aLi[i].onclick = function(){ 27 28 oImg.src = arrUrl[ this.index ]; 29 oP.innerHTML = arrText[this.index]; 30 oSpan.innerHTML = 1+this.index+‘/‘+arrText.length; 31 32 for(var j=0; j<arrUrl.length; j++){ 33 // arrUrl[j].className = ‘‘; 34 aLi[j].className = ‘‘; 35 // aLi[this.index].className = ‘active‘; 这个代码可以实现，这里的就是点击的第this.index个li 36 this.className = ‘active‘; // 这个代码也可以实现，都是给当前元素添加active样式。这里的this是指当前li 37 //也就是说二者指向的都是同一个元素，不过显然后者代码更简洁 38 } 39 } 40 } 41 42 </script>
自定义属性之图片切换实例——初始化、实现切换效果——JS学习笔记2015-5-29（第42天）
标签：
原文地址：http://www.cnblogs.com/zhangxg/p/4539643.html
