javascript - 对不同的图像重复 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 更新第二组图像