[英]JavaScript slideshow displaying all images
我的幻燈片連續顯示所有圖像,直到單擊下一個或上一個按鈕,然后幻燈片才能正常運行。 我發現了一個類似的線程,問題最終是語法錯誤。 我已經一遍又一遍地閱讀代碼,看不到問題所在。 請讓我知道我在做什么錯。 謝謝!
.ssbutton{
border:none;
display:inline-block;
outline:0;
padding:8px 16px;
vertical-align:middle;
overflow:hidden;
text-decoration:none;
color:inherit;
background-color:inherit;
text-align:center;
cursor:pointer;
white-space:nowrap
}
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("Slide");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
<div class="slideShow">
<img class="Slide" src="images/Pic1.png">
<img class="Slide" src="images/Pic2.png">
<img class="Slide" src="images/Pic3.png">
<img class="Slide" src="images/Pic4.png">
<button class="ssbutton" onclick="plusDivs(-1)">❮Prev</button>
<button class="ssbutton" onclick="plusDivs(1)">Next ❯</button>
</div>
您需要默認隱藏.Slide
元素,您可以在CSS中進行設置:
.Slide {
display: none;
}
/* show first slide by default */
.Slide:first-child {
display: block;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.