1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>美术馆</title> 5 <style type="text/css"> 6 .imageSmall 7 { 8 112px; 9 height: 70px; 10 } 11 12 #nav li 13 { 14 /*设置ul li 表单浮动、去点、内边距*/ 15 float: left; 16 list-style-type: none; 17 margin: 10px; 18 } 19 #nav 20 { 21 /*设置小图片总宽度，居中*/ 22 700px; 23 margin: 0 auto; 24 } 25 #dv 26 { 27 /*设置大图片居中*/ 28 text-align: center; 29 } 30 </style> 31 <script type="text/javascript"> 32 onload = function () { 33 //获得所有img标签 34 var imageSmall = document.getElementsByTagName("img"); 35 //获得div标签 36 var dv = document.getElementById("dv"); 37 //获得所有a标签 38 var aHref = document.getElementsByTagName("a"); 39 for (var i = 0; i < imageSmall.length; i++) { 40 //小图片点击事件 41 imageSmall[i].onclick = function () { 42 if (dv.getElementsByTagName("img")) { 43 //如果已经存在大图片，就删除，dv的内部清空（不然越点越多） 44 dv.innerHTML = ""; 45 } 46 //新建大图片 47 var imageLarge = document.createElement("img"); 48 dv.appendChild(imageLarge); 49 //大图片的地址等于this小图片的地址，使用this关键字！！ 50 imageLarge.src = this.src; 51 //return false; 52 } 53 } 54 } 55 </script> 56 </head> 57 <body> 58 <ul id="nav"> 59 <li> 60 <img class="imageSmall" id="img1" src="source/image/01.jpg" /></li> 61 <li> 62 <img class="imageSmall" id="img2" src="source/image/02.jpg" /></li> 63 <li> 64 <img class="imageSmall" id="img3" src="source/image/03.jpg" /></li> 65 <li> 66 <img class="imageSmall" id="img4" src="source/image/04.jpg" /></li> 67 <li> 68 <img class="imageSmall" id="img5" src="source/image/05.jpg" /></li> 69 </ul> 70 <div style="clear: both"> 71 </div> 72 <div id="dv"> 73 </div> 74 </body> 75 </html>