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

更新第二组图像

对不同的图像重复onclick功能

1 个答案: