对不同的图像重复onclick功能

Question

我正在制作图像幻灯片，它实际上是一个润饰画廊。 这个想法是，当您单击图像时，它会切换到另一图像。 因此显示之前/之后。

我使用了onclick函数，该函数在第一张图片上达到了这种效果。 但是，当我为第二张图像重复该功能时，它不起作用。

我对Javascript的了解不是那么强，所以我不明白为什么重复代码仅适用于第一个图像而不适用于第二个图像。

 var slideIndex = 1; showSlide(slideIndex); function plusSlides(n){ showSlide(slideIndex += n); } function currentSlide(n) { showSlide(slideIndex = n); } function showSlide(n){ var i; var slides = document.getElementsByClassName("myslides"); if (n > slides.length) { slideIndex = 1; } if (n < 1) { slideIndex = slides.length; } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideIndex-1].style.display = "block"; } function toggleImage(id) { var image = document.getElementById(id); image.style.display = image.style.display == "none" ? "block" : "none"; } function toggleBoth() { toggleImage('image1') toggleImage('image2') } 

 body{ font-family: verdana,sans-serif; margin: 0; font-size: 100%; background-image: url(""); } #slideshow-container{ position: relative; margin: auto; background-color: black; overflow: hidden; } #slideshow-container img{ display: block; margin: 0 auto; max-width: 100%; position: relative; max-height: 800px !important; } .prev , .next{ position: absolute; top: 50%; font-size: 30px; font-weight: bold; padding: 16px; margin-top: -22px; border-radius: 0 3px 3px 0; color: #fff; cursor: pointer; z-index: 1; } .next{ right: 0; border-radius: 3px 0 0 3px; } .prev:hover,.next:hover{ background-color: rgba(0,0,0,0.8); } .caption{ text-align: center; position: absolute; bottom: 6px; width: 100%; color: #f2f2f2; font-size: 1em; } @media(max-width: 768px) { #slideshow-container img{ max-height: 600px !important; display: block; margin: 0 auto; max-width: 100%; } @media(max-width: 320px) { #slideshow-container img{ max-height: 400px !important; display: block; margin: 0 auto; max-width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!---Images not owned by me ---> <div id="slideshow-container"> <div id="mainImg"> <div class="myslides fade"> <div><img id="image1" onclick="toggleBoth()" src="http://www.hestetika.it/wp-content/uploads/2016/10/stevemccurry_5.jpg"> <img id="image2" onclick="toggleBoth()" style="display:none;" src="https://static.boredpanda.com/blog/wp-content/uploads/2014/12/Top-10-photographers-for-travel-portraits27__700.jpg"> </div> <div class="caption">Text 1</div> </div> <div class="myslides fade"> <div><img id="image1" onclick="toggleBoth()" src="https://hairstylesdeep.com/wp-content/uploads/2017/07/black-weave-hairstyles-with-bangs-straight-weave-hairstyles-with-side-bangs-easy-casual-hairstyles.jpg"> <img id="image2" onclick="toggleBoth()" style="display:none;" src="https://static.boredpanda.com/blog/wp-content/uploads/2014/12/Top-10-photographers-for-travel-portraits27__700.jpg"> </div> <div class="caption">Text 2</div> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> </div> <br> 

Answer 1

它不起作用的原因是您在第二个img上使用重复的ID。 尝试使用image3和image4更新第二组图像