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 #img1 12 { 13 margin-left: 200px; 14 } 15 </style> 16 <script type="text/javascript"> 17 onload = function () { 18 //获得所有img标签 19 var imageSmall = document.getElementById("img1"); 20 //获得div标签 21 var dv = document.getElementById("dv"); 22 //小图片点击事件 23 imageSmall.onclick = function () { 24 if (dv.getElementsByTagName("img")) { 25 //如果存在图片，就删除，dv的内部清空 26 dv.innerHTML=""; 27 } 28 29 //在div中增加大图片的标签 30 var imageLarge = document.createElement("img"); 31 dv.appendChild(imageLarge); 32 imageLarge.src = imageSmall.src; 33 imageLarge.alt = "大图片"; 34 } 35 } 36 </script> 37 </head> 38 <body> 39 <img class="imageSmall" id="img1" src="source/image/01.jpg" /> 40 <img class="imageSmall" id="img2" src="source/image/02.jpg" /> 41 <img class="imageSmall" id="img3" src="source/image/03.jpg" /> 42 <img class="imageSmall" id="img4" src="source/image/04.jpg" /> 43 <img class="imageSmall" id="img5" src="source/image/05.jpg" /> 44 <div id="dv"> 45 </div> 46 </body> 47 </html>