Question

我在点击X按钮时试图隐藏幻灯片，但它无法正常工作。我不确定它是否与"id"或"class"有任何关系，但我已经尝试了所有内容，但它并没有隐藏我想要的内容。（不能使用Jquery，这适用于一个小学校项目）。我通常可以使用该按钮和功能隐藏所有内容，但我无法使用幻灯片显示它。

<div id="slideshow-container">
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

 <button id="exit" onclick="hideSlides(this, 'slideshow-container')">
  <img id="exit" src="image/exit.png">
 </button>

  <div class="mySlides fade">
    <img src="image/remar1.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar3.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar4.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar5.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar6.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar7.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar8.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa1.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa3.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa4.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa5.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa6.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa7.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose1.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose3.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose4.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose5.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose6.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose7.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose8.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose9.jpg" style="width:100%">
  </div>

  </div>


//javascript
  function hideSlides(){
  var slides = 
  document.getElementsByClassName("mySlides").style.display="none"

  }

//css
  .mySlides {
  display: none;
  visibility: visible;
  }
  img {vertical-align: middle;}


  #slideshow-container {
  max-width: 1000px;
  height: 200px;
  left: 10px;
  position: relative;
  margin: auto;
  bottom: 1932px;
  visibility: hidden;
  }


 .prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;

  }

Answer 1

document.getElementsByClassName会返回HTMLCollection。因此，使用当前的HTML设计，您必须迭代所有选定的元素并应用所需的样式。

使用ES6，您可以使用Array.from从类似数组的对象构建数组您可以找到Array.from here

的文档

所以你可以改变你的功能：

function hideSlides(){
    var slides = document.getElementsByClassName("mySlides");
    Array.prototype.forEach.call(slides, function(el) {
        el.style.display = 'none';
    });
}

Answer 2

是hideSlides()单击x时调用的函数？尝试声明变量，然后添加样式：

function hideSlides(){
    var slides = document.getElementsByClassName("mySlides")
    slides.style.display="none"  
}

如果您想要摆脱它所在的空白区域，您还需要更改可见性。

点击隐藏幻灯片

2 个答案: