下断代码就是实现点击图片上小圆点实现，切换图片功能。

第一个div盒子放的图片可以实现，切换，第二个div里面的图片就实现不了效果。

如何优化js代码，使两个div的图片都能实现图片切换效果。

如果更改，id属性命名，是不是就得重复写目前的调用方法。

1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Document</title>
  7     <style type="text/css">
  8     * {
  9         margin: 0;
 10         padding: 0;
 11     }
 12     
 13     li {
 14         list-style: none;
 15     }
 16     
 17     #jpg {
 18         position: relative;
 19         left: 50%;
 20         top: 20px;
 21         margin-left: -150px;
 22         width: 300px;
 23         height: 300px;
 24         margin-bottom: 20px;
 25     }
 26     
 27     #jpg li {
 28         display: block;
 29     }
 30     
 31     #pick {
 32         width: 300px;
 33         height: 300px;
 34     }
 35     
 36     #pick .pic {
 37         position: absolute;
 38         top: 0px;
 39         left: 0px;
 40         opacity: 1;
 41     }
 42     
 43     #pick .hid {
 44         position: absolute;
 45         top: 0px;
 46         left: 0px;
 47         opacity: 0;
 48     }
 49     
 50     img {
 51         width: 300px;
 52         height: 300px;
 53     }
 54     
 55     #panel ul {
 56         list-style: none;
 57         height: 20px;
 58         position: absolute;
 59         bottom: 20px;
 60         left: 50%;
 61         margin-left: -52px;
 62         border-color: orange;
 63         z-index: 1;
 64         background: rgba(0, 0, 0, 0.5);
 65         border-radius: 20px;
 66     }
 67     
 68     #panel ul li {
 69         float: left;
 70         margin: 0 3px;
 71         width: 20px;
 72         height: 20px;
 73         background: #FF5601;
 74         border-radius: 50%;
 75         text-align: center;
 76         color: #fff;
 77         font-size: 12px;
 78         line-height: 20px;
 79         background: rgba(255, 86, 1, 0.7);
 80         cursor: pointer;
 81         z-index: 1;
 82     }
 83     </style>
 84 </head>
 85 <script type="text/javascript">
 86 function animate(m) {
 87     var parent = document.getElementById('pick');
 88     var pic = parent.getElementsByTagName('li');
 89     if (m) {
 90         pic[m].setAttribute('class', 'pic');
 91     }
 92 }
 93 
 94 function div1() {
 95     var parent = document.getElementById('pick');
 96     var pic = parent.getElementsByTagName('li');
 97     var panel = document.getElementById('panel');
 98     var li = panel.getElementsByTagName('li');
 99 
100     for (var i = 0; i < li.length; i++) {
101         li[i].id = i;
102         li[i].onclick = function(i) {
103             for (var j = 0; j < li.length; j++) {
104                 pic[j].setAttribute('class', 'hid');
105             }
106             var x = this.id;
107             animate(x);
108         }
109     }
110 }
111 window.onload = function() {
112     div1();
113 
114 }
115 </script>
116 
117 <body>
118     <div id="jpg">
119         <div id="pick">
120             <li class="pic"><img src="http://f.hiphotos.baidu.com/zhidao/pic/item/f636afc379310a553e7a868db74543a982261068.jpg" alt=""></li>
121             <li class="hid"><img src="http://d.hiphotos.baidu.com/zhidao/pic/item/3b87e950352ac65c1b6a0042f9f2b21193138a97.jpg"></li>
122             <li class="hid"><img src="http://h.hiphotos.baidu.com/zhidao/pic/item/7a899e510fb30f24d58b964cc995d143ad4b036f.jpg"></li>
123             <li class="hid"><img src="http://lvyou.baidu.com/event/s/2012golden-week/img/bg.1.jpg"></li>
124         </div>
125         <div id="panel">
126             <ul>
127                 <li>1</li>
128                 <li>2</li>
129                 <li>3</li>
130                 <li>4</li>
131             </ul>
132         </div>
133     </div>
134     <div id="jpg">
135         <div id="pick">
136             <li class="pic"><img src="http://f.hiphotos.baidu.com/zhidao/pic/item/f636afc379310a553e7a868db74543a982261068.jpg" alt=""></li>
137             <li class="hid"><img src="http://d.hiphotos.baidu.com/zhidao/pic/item/3b87e950352ac65c1b6a0042f9f2b21193138a97.jpg"></li>
138             <li class="hid"><img src="http://h.hiphotos.baidu.com/zhidao/pic/item/7a899e510fb30f24d58b964cc995d143ad4b036f.jpg"></li>
139             <li class="hid"><img src="http://lvyou.baidu.com/event/s/2012golden-week/img/bg.1.jpg"></li>
140         </div>
141         <div id="panel">
142             <ul>
143                 <li>1</li>
144                 <li>2</li>
145                 <li>3</li>
146                 <li>4</li>
147             </ul>
148         </div>
149     </div>
150 </body>
151 
152 </html>