javascript - 图像切换图库

Question

我有一个画廊，我想要一个切换功能，当你点击一张图片时，它会变成另一张图片。我为图库中的前两张图片准备了 onclick="toggleBoth() 代码，但它不起作用。

当您点击图像时，它不会改变。我做错了什么吗？

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.opacity = "0";
    };

    slides[slideIndex-1].style.opacity = "1";
}

function toggleImage(id) {
    var image = document.getElementById(id);
    image.style.display = image.style.display == "none" ? "block" : "none";
}

function toggleBoth() {
  toggleImage('image1')
  toggleImage('image2')
}

function toggleBoth() {
  toggleImage('image1')
  toggleImage('image2')
  toggleImage('image3')
  toggleImage('image4')
}

$(document).ready(function(){
  $(".next").click(function(){
    $("")
  });
});

* {
margin: 0;
padding: 0;
list-style-type:none;
}

body{
  margin: 0;
  font-size: 100%;
/*   background-color: #6E92A1; */
  background-color: #232324;
  height: 100vh;
}

.header {
  overflow: auto;
/*   background-color: #b0d5d0; */
  background-color: #ECAAAC;
}

.logo {
  float: left;
  padding-top: 1em;
/*   padding-bottom: 1em; */
  width: 20%;
  text-align: center;
  font-family: 'Allerta', sans-serif;
  text-transform: uppercase;
	font-weight: 700;
/*   line-height: 50px; */

}

.logo a {
  text-decoration: none;
  font-size: 1em;
  color: black;
}

.nav {
  background-color: #232324;
  padding-top: 1em;
  padding-bottom: 1em;
  width: 80%;
  float: right;
}

li {
  display: inline-block !important;
  border-right: 1px solid #656568;
  padding-right: 1.5em;
  padding-left: 1.5em;
}

li:last-child{
  border-right: none;
}

li a {
  text-decoration: none;
  text-align: center;
  color: white;
  font: normal 62.5% "proxima-nova-alt", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
}

li a:hover {
  color: #ECAAAC;
}

.text {
  background-color: black;
  padding: .75em 0 .75em 0;
}

p {
  color: #656568;
  text-align: center;
  font-size: 1em;
  font: italic 80% "proxima-nova-alt", Helvetica, Arial, sans-serif;
}

#slideshow-container{
  position: relative;
  margin: auto;
  background-color: black;
  overflow: hidden;
  padding-bottom: 2.5em;
/*   height: 1000px !important; */
  height: 1000px !important;
}

#slideshow-container img{
  display: block;
  margin: 0 auto;
  max-width: 100%;
  position: relative;
  height: 960px;
}

.myslides {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  opacity: 1;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

.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{
/*   color: #b0d5d0 ; */
/*   background-color: rgba(0,0,0,0.8); */
}

.caption{
  text-align: center;
  position: absolute;
/*   bottom: 6px; */
  width: 100%;
  color: #f2f2f2;
  text-shadow: 2px 2px 4px black;
  font: normal 62.5% "proxima-nova-alt", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
  padding-top: 1.25em;
/*   padding-bottom: .75em; */
/*   font-size: 15px; */
/*   padding: 8px 22px; */
}

@media(max-width: 798px) {
  #slideshow-container {
    height: 640px !important;
  }
  #slideshow-container img {
    max-height: 600px !important;
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
  .nav {
    width: 75%;
  }
  .logo {
    width: 25%;
    text-align: center;
  }
 .logo a {
    font-size: .75em;
  }
  li {
    padding-right: .75em !important;
    padding-left: .75em !important;
  }
}
  
@media(max-width: 468px) {
    #slideshow-container {
    height: 440px !important;
  }
  #slideshow-container img{
    max-height: 400px !important;
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
  .nav {
    width: 65%;
  }
  .logo {
    width: 35%;
    text-align: center;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!---Images not owned by me --->
<link href="https://fonts.googleapis.com/css?family=Allerta" rel="stylesheet">

<div class="header">
  <div class="logo">
    <a href="">Gabriella Farfan</a>
  </div>
  <div class="nav">
      <ul>
        <li><a href="">Portfolio</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>
  </div>
</div>



<div id="slideshow-container">
  
<div class="text">
  <p>Click on the image to see the before and after</p>
</div>

  <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="image3" onclick="toggleBoth()" src="https://i.pinimg.com/736x/2f/7a/33/2f7a33e82f03de319faa0663371e2609--interesting-faces-freckles.jpg">
    <img id="image4" onclick="toggleBoth()" style="display:none;" src="http://cdn3.spiegel.de/images/image-945792-galleryV9-buud-945792.jpg">
    </div>
      <div class="caption">Text 2</div>
  </div>

 <div class="myslides fade">
<div><img src="https://media.discordapp.net/attachments/327123793040637952/436369548996902913/nwts_ariana.jpg?width=1050&height=1050"></div>
  <div class="caption">Text 3</div>
  </div>

  <div class="myslides fade">
<div><img src="http://jmacpratt.weebly.com/uploads/1/2/0/1/12013129/portrait2_orig.jpg"></div>
  <div class="caption">Text 4</div>
  </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

    <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>

<br>

Answer 1

你的问题是有问题的图像没有收到点击事件。由于您的其他图像堆叠在第一个图像之上，因此它们正在接收点击事件(不透明度:0 元素仍然是事件的接收者)。如果您希望其他图像不妨碍事件，则其他图像需要为 display:none。或者，您可以更改堆叠上下文，使可见的图像最重要，或者将点击事件处理程序绑定(bind)到公共(public)父级并确定从那里切换谁。希望有所帮助。

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')
//}

function toggleBoth() {
  toggleImage('image1')
  toggleImage('image2')
  toggleImage('image3')
  toggleImage('image4')
}

$(document).ready(function(){
  $(".next").click(function(){
    $("")
  });
});

* {
margin: 0;
padding: 0;
list-style-type:none;
}

body{
  margin: 0;
  font-size: 100%;
/*   background-color: #6E92A1; */
  background-color: #232324;
  height: 100vh;
}

.header {
  overflow: auto;
/*   background-color: #b0d5d0; */
  background-color: #ECAAAC;
}

.logo {
  float: left;
  padding-top: 1em;
/*   padding-bottom: 1em; */
  width: 20%;
  text-align: center;
  font-family: 'Allerta', sans-serif;
  text-transform: uppercase;
	font-weight: 700;
/*   line-height: 50px; */

}

.logo a {
  text-decoration: none;
  font-size: 1em;
  color: black;
}

.nav {
  background-color: #232324;
  padding-top: 1em;
  padding-bottom: 1em;
  width: 80%;
  float: right;
}

li {
  display: inline-block !important;
  border-right: 1px solid #656568;
  padding-right: 1.5em;
  padding-left: 1.5em;
}

li:last-child{
  border-right: none;
}

li a {
  text-decoration: none;
  text-align: center;
  color: white;
  font: normal 62.5% "proxima-nova-alt", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
}

li a:hover {
  color: #ECAAAC;
}

.text {
  background-color: black;
  padding: .75em 0 .75em 0;
}

p {
  color: #656568;
  text-align: center;
  font-size: 1em;
  font: italic 80% "proxima-nova-alt", Helvetica, Arial, sans-serif;
}

#slideshow-container{
  position: relative;
  margin: auto;
  background-color: black;
  overflow: hidden;
  padding-bottom: 2.5em;
/*   height: 1000px !important; */
  height: 1000px !important;
}

#slideshow-container img{
  display: block;
  margin: 0 auto;
  max-width: 100%;
  position: relative;
  height: 960px;
}

.myslides {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  opacity: 1;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

.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{
/*   color: #b0d5d0 ; */
/*   background-color: rgba(0,0,0,0.8); */
}

.caption{
  text-align: center;
  position: absolute;
/*   bottom: 6px; */
  width: 100%;
  color: #f2f2f2;
  text-shadow: 2px 2px 4px black;
  font: normal 62.5% "proxima-nova-alt", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
  padding-top: 1.25em;
/*   padding-bottom: .75em; */
/*   font-size: 15px; */
/*   padding: 8px 22px; */
}

@media(max-width: 798px) {
  #slideshow-container {
    height: 640px !important;
  }
  #slideshow-container img {
    max-height: 600px !important;
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
  .nav {
    width: 75%;
  }
  .logo {
    width: 25%;
    text-align: center;
  }
 .logo a {
    font-size: .75em;
  }
  li {
    padding-right: .75em !important;
    padding-left: .75em !important;
  }
}
  
@media(max-width: 468px) {
    #slideshow-container {
    height: 440px !important;
  }
  #slideshow-container img{
    max-height: 400px !important;
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
  .nav {
    width: 65%;
  }
  .logo {
    width: 35%;
    text-align: center;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!---Images not owned by me --->
<link href="https://fonts.googleapis.com/css?family=Allerta" rel="stylesheet">

<div class="header">
  <div class="logo">
    <a href="">Gabriella Farfan</a>
  </div>
  <div class="nav">
      <ul>
        <li><a href="">Portfolio</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>
  </div>
</div>



<div id="slideshow-container">
  
<div class="text">
  <p>Click on the image to see the before and after</p>
</div>

  <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="image3" onclick="toggleBoth()" src="https://i.pinimg.com/736x/2f/7a/33/2f7a33e82f03de319faa0663371e2609--interesting-faces-freckles.jpg">
    <img id="image4" onclick="toggleBoth()" style="display:none;" src="http://cdn3.spiegel.de/images/image-945792-galleryV9-buud-945792.jpg">
    </div>
      <div class="caption">Text 2</div>
  </div>

 <div class="myslides fade">
<div><img src="https://media.discordapp.net/attachments/327123793040637952/436369548996902913/nwts_ariana.jpg?width=1050&height=1050"></div>
  <div class="caption">Text 3</div>
  </div>

  <div class="myslides fade">
<div><img src="http://jmacpratt.weebly.com/uploads/1/2/0/1/12013129/portrait2_orig.jpg"></div>
  <div class="caption">Text 4</div>
  </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

    <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>

<br>