如何优化js函数，使2个同组织的结构，获得相同效果。

悬赏园豆：10 [已关闭问题] 关闭于 2016-08-07 15:51

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

第一个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>

javascript web前端 html/css基础

aimonengzhu | 初学一级 | 园豆：193
提问于：2016-08-07 00:22

< >

所有回答(2)

...最基本的id是唯一的，它不是class类名。id只有一个，别多写。

当然你把id换成类名（pick）通过到时候循环也能实现多个盒子（jpg）内实现图片切换。但是有点麻烦

我建议你用面向对象的方式写下。把需要改的一些条件设为对象的属性。想用的时候实例化下对象就能实现！

代码我就不写你，自己琢磨下！

leywis | 园豆：10 (初学一级) | 2016-08-18 13:17

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    li {
        list-style: none;
    }
    
    #jpg,#jpg1 {
        position: relative;
        left: 50%;
        top: 20px;
        margin-left: -150px;
        width: 300px;
        height: 300px;
        margin-bottom: 20px;
    }
    
    #jpg li,#jpg1 li {
        display: block;
    }
    
    #pick,#pick1 {
        width: 300px;
        height: 300px;
    }
    
    #pick .pic,#pick1 .pic {
        position: absolute;
        top: 0px;
        left: 0px;
        opacity: 1;
    }
    
    #pick .hid,#pick1 .hid {
        position: absolute;
        top: 0px;
        left: 0px;
        opacity: 0;
    }
    
    img {
        width: 300px;
        height: 300px;
    }
    
    #panel ul,#panel1 ul{
        list-style: none;
        height: 20px;
        position: absolute;
        bottom: 20px;
        left: 50%;
        margin-left: -52px;
        border-color: orange;
        z-index: 1;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 20px;
    }
    
    #panel ul li,#panel1 ul li {
        float: left;
        margin: 0 3px;
        width: 20px;
        height: 20px;
        background: #FF5601;
        border-radius: 50%;
        text-align: center;
        color: #fff;
        font-size: 12px;
        line-height: 20px;
        background: rgba(255, 86, 1, 0.7);
        cursor: pointer;
        z-index: 1;
    }
    </style>
</head>


<body>
    <div id="jpg">
        <div id="pick">
            <li class="pic"><img src="http://f.hiphotos.baidu.com/zhidao/pic/item/f636afc379310a553e7a868db74543a982261068.jpg" alt=""></li>
            <li class="hid"><img src="http://d.hiphotos.baidu.com/zhidao/pic/item/3b87e950352ac65c1b6a0042f9f2b21193138a97.jpg"></li>
            <li class="hid"><img src="http://h.hiphotos.baidu.com/zhidao/pic/item/7a899e510fb30f24d58b964cc995d143ad4b036f.jpg"></li>
            <li class="hid"><img src="http://lvyou.baidu.com/event/s/2012golden-week/img/bg.1.jpg"></li>
        </div>
        <div id="panel">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </div>
    <div id="jpg1">
        <div id="pick1">
            <li class="pic"><img src="http://f.hiphotos.baidu.com/zhidao/pic/item/f636afc379310a553e7a868db74543a982261068.jpg" alt=""></li>
            <li class="hid"><img src="http://d.hiphotos.baidu.com/zhidao/pic/item/3b87e950352ac65c1b6a0042f9f2b21193138a97.jpg"></li>
            <li class="hid"><img src="http://h.hiphotos.baidu.com/zhidao/pic/item/7a899e510fb30f24d58b964cc995d143ad4b036f.jpg"></li>
            <li class="hid"><img src="http://lvyou.baidu.com/event/s/2012golden-week/img/bg.1.jpg"></li>
        </div>
        <div id="panel1">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript">

function animate(m,id){
    var parent=document.getElementById(id);
    var pic=parent.getElementsByTagName('li');
    if(m){
        pic[m].setAttribute('class','pic');
    }
}
function div(picId,tagId){
    var parent=document.getElementById(picId);
    var pic=parent.getElementsByTagName('li');
    var panel=document.getElementById(tagId);
    var li=panel.getElementsByTagName('li');
    for(var i=0;i<li.length;i++){
        li[i].id=i;
        li[i].onclick=function(i){
            for(var j=0;j<li.length;j++){
                pic[j].setAttribute('class','hid');
            }
            var x=this.id;
            animate(x,picId);
        }
    }
}
div('pick','panel');
div('pick1','panel1');
    </script>
</html>

这样就好了

改吧 | 园豆：104 (初学一级) | 2016-08-24 10:26

嗯，多谢，这个问题提了好久了，后来也解决了，大题思路和你差不多。可惜问题关了，没法送豆了

支持(0) 反对(0) aimonengzhu | 园豆：193 (初学一级) | 2016-08-24 11:02

@aimonengzhu: 哈哈没事解决就好

支持(0) 反对(0) 改吧 | 园豆：104 (初学一级) | 2016-08-24 11:24

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

如何优化js函数，使2个同组织的结构，获得相同效果。

欢迎，请先登录或者注册。