如何用js代码实现图片切换效果

通过点击按钮,实现图片的隐藏与显现,切换。

实现代码:
<style> .a{ width: 300px; height: 300px; border: 1px solid black; } .b{ width: 50px; height: 30px; float: left; cursor: pointer; } .c{ width: 200px; height: 200px; position: relative; margin-top: 30px; margin-left: 0px; } .c1{ width: 200px; height: 200px; position: absolute; left: 10px; bottom: 0px; } </style> </head> <body> <div class="a"> <div class="b" onclick="show('a1')">11</div> <div class="b" onclick="show('a2')">22</div> <div class="b" onclick="show('a3')">33</div> <div class="c"> <div id="a1" class="c1" style="background-color: #000000;"></div> <div id="a2" class="c1" style="background-color: red; " ></div> <div id="a3" class="c1" style="background-color: yellow; "></div> </div> </div> </body> </html> <script> function show(de) { var d= document.getElementById(de); var c= document.getElementsByClassName("c1"); for(var i=0;i<c.length;i++) { c[i].style.display="none"; } d.style.display="block"; } </script>

  

posted @ 2017-09-08 09:18  迪恩杰  阅读(804)  评论(0编辑  收藏  举报