我试图在单击 X 按钮时隐藏幻灯片,但它不起作用。我不确定它是否与 "id"
或 "class"
有关,但我已经尝试了所有方法,并且它并没有隐藏我想要的内容它到。 (不能使用 Jquery,这是一个小型学校项目)。我通常可以使用该按钮和功能隐藏所有内容,但我无法使其与幻灯片一起使用。
<div id="slideshow-container">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</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;
}
最佳答案
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';
});
}
关于javascript - 单击时隐藏幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50671417/