美术馆（完）

 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>