1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 body { 8 font-family: "Helvetica", "Arial", serif; 9 color: #333; 10 background-color: #ccc; 11 margin: 1em 10%; 12 } 13 14 h1 { 15 color: #333; 16 background-color: transparent; 17 } 18 19 a { 20 color: #c60; 21 background-color: transparent; 22 font-weight: bold; 23 text-decoration: none; 24 } 25 26 ul { 27 padding: 0; 28 } 29 30 li { 31 float: left; 32 padding: 1em; 33 list-style: none; 34 } 35 36 #imagegallery { 37 38 list-style: none; 39 } 40 41 #imagegallery li { 42 margin: 0px 20px 20px 0px; 43 padding: 0px; 44 display: inline; 45 } 46 47 #imagegallery li a img { 48 border: 0; 49 } 50 </style> 51 52 </head> 53 <body> 54 <h2> 55 美女画廊 56 </h2> 57 <a href="#">注册</a> 58 <ul id="imagegallery"> 59 <li> 60 <a href="image/1.jpg" title="美女A"> 61 <img src="image/1-small.jpg" width="100" alt="美女1"/> 62 </a> 63 </li> 64 <li> 65 <a href="image/2.jpg" title="美女B"> 66 <img src="image/2-small.jpg" width="100" alt="美女2"/> 67 </a> 68 </li> 69 <li> 70 <a href="image/3.jpg" title="美女C"> 71 <img src="image/3-small.jpg" width="100" alt="美女3"/> 72 </a> 73 </li> 74 <li> 75 <a href="image/4.jpg" title="美女D"> 76 <img src="image/4-small.jpg" width="100" alt="美女4"/> 77 </a> 78 </li> 79 </ul> 80 81 82 <div style="clear:both"></div> 83 84 <img id="image" src="image/placeholder.png" width="450px"/> 85 86 <p id="des">选择一个图片</p> 87 88 <script> 89 //需求：点击小图片，改变下面的大图片的src属性值。赋值为a链接的href属性值。 90 //让p标签的innnerHTML属性值，变成a标签的title属性值。 91 //步骤： 92 //1.获取事件源和相关元素 93 //2.绑定事件 94 //3.书写事件驱动程序 95 96 97 //1.获取事件源和相关元素 98 //利用元素获取其下面的标签。 99 var ul = document.getElementById("imagegallery"); 100 var aArr = ul.getElementsByTagName("a"); 101 // console.log(aArr[0]); 102 var img = document.getElementById("image"); 103 var des = document.getElementById("des"); 104 //2.绑定事件 105 //以前是一个一个绑定，但是现在是一个数组。for循环绑定 106 for(var i=0;i<aArr.length;i++){ 107 aArr[i].onclick = function () { 108 //3.书写事件驱动程序 109 //修改属性 110 //this指的是函数调用者，和i并无关系，所以不会出错。 111 img.src = this.href; 112 // img.src = aArr[i].href; 113 des.innerHTML = this.title; 114 return false; 115 } 116 } 117 118 </script> 119 120 </body> 121 </html>