Javascript幻灯片控件不采取任何行动

Question

我在原生JavaScript中制作了幻灯片，但下一个和上一个按钮不起作用。分页点也应该遵循相应的幻灯片。

当按下下一个按钮时，下一张幻灯片应该显示，等等。在devTools中，它显示第一张幻灯片的样式设置为显示，第一个点添加了活动类，但按下下一个/上一个按钮时不会发生任何事情。

这里是我的代码：

window.onload = function() { 
document.getElementById("nextSlide").addEventListener("click",nextSlide()); 
document.getElementById("prevSlide").addEventListener("click",prevSlide());  

}; 

var slideIndex = 0; 

function nextSlide() { 
var slideList = document.getElementsByClassName("imgSlide"); 
var dots = document.getElementsByClassName("dots"); 
slideIndex += 1; 

if (slideIndex >= slideList.length) { 
    slideIndex = 0; 
} 

for(var i = 0; i < slideList.length; i++) { 
    slideList[i].style.display = "none";   
}  

for(var d = 0; d < dots.length; d++) { 
    dots[d].classList.remove("active"); 
} 

    slideList[slideIndex].style.display = "block"; 
    dots[slideIndex].classList.add("active"); 
    return false;  
} 

function prevSlide() { 
var slideList = document.getElementsByClassName("imgSlide"); 
var dots = document.getElementsByClassName("dots"); 
slideIndex -= 1; 

if (slideIndex < 0) (slideList.length - 1); 

for(var i = 0; i < slideList.length; i++) { 
    slideList[i].style.display = "none";      
    } 

for(var d = 0; d < dots.length; d++) { 
    dots[d].classList.remove("active"); 
} 

    slideList[slideIndex].style.display = "block"; 
    dots[slideIndex].classList.add("active"); 
} 

而我的HTML名为功能addEventListener

<div id="slides-container"> 
<ul class="slides"> 
    <li class="imgSlide"><img 
    src="/BackOffice/viagens_header_images/blobid1508696899148.jpg" 
    alt="Alpine 
    Scenery" /></li> 
    <li class="imgSlide"><img 
    src="/BackOffice/viagens_header_images/blobid1509065118446.jpg" 
    alt="Kalte 
    Rinne" /></li> 
    <li class="imgSlide"><img 
    src="/BackOffice/viagens_header_images/blobid1508696913346.jpg" 
    alt="Adiltzgraben" /></li> 
    </ul> 
<div class="controls"><button type="button" id="prevSlide" role="button"> 
</button> 
<ul class="dot-navigation"> 
    <li class="dots"></li> 
    <li class="dots"></li> 
    <li class="dots"></li> 
</ul> 
<button type="button" id="nextSlide" role="button"></button></div> 
</div> 

Answer 1

Listener参数必须是不带引号和括号的函数名称：

document.getElementById("nextSlide").addEventListener("click", nextSlide); 
document.getElementById("prevSlide").addEventListener("click", prevSlide); 

也是另一个小错误。取而代之的是线的if (slideIndex < 0) (slideList.length - 1); 必须是：

if (slideIndex < 0) { 
    slideIndex = slideList.length; 
} 

window.onload = function() { 
 
    document.getElementById("nextSlide").addEventListener("click", nextSlide); 
 
    document.getElementById("prevSlide").addEventListener("click", prevSlide); 
 

 
}; 
 

 
var slideIndex = 0; 
 

 
function nextSlide() { 
 
    var slideList = document.getElementsByClassName("imgSlide"); 
 
    var dots = document.getElementsByClassName("dots"); 
 
    slideIndex += 1; 
 

 
    if (slideIndex >= slideList.length) { 
 
    slideIndex = 0; 
 
    } 
 

 
    for (var i = 0; i < slideList.length; i++) { 
 
    slideList[i].style.display = "none"; 
 
    } 
 

 
    for (var d = 0; d < dots.length; d++) { 
 
    dots[d].classList.remove("active"); 
 
    } 
 

 
    slideList[slideIndex].style.display = "block"; 
 
    dots[slideIndex].classList.add("active"); 
 
    return false; 
 
} 
 

 
function prevSlide() { 
 
    var slideList = document.getElementsByClassName("imgSlide"); 
 
    var dots = document.getElementsByClassName("dots"); 
 
    slideIndex -= 1; 
 

 
    if (slideIndex < 0) { 
 
    slideIndex = slideList.length - 1; 
 
    } 
 

 
    for (var i = 0; i < slideList.length; i++) { 
 
    slideList[i].style.display = "none"; 
 
    } 
 

 
    for (var d = 0; d < dots.length; d++) { 
 
    dots[d].classList.remove("active"); 
 
    } 
 

 
    slideList[slideIndex].style.display = "block"; 
 
    dots[slideIndex].classList.add("active"); 
 
}

.imgSlide:not(:first-child) { 
 
    display: none; 
 
} 
 

 
.slides { 
 
    list-style-type: none; 
 
}

<div id="slides-container"> 
 
    <ul class="slides"> 
 
    <li class="imgSlide"><img src="http://via.placeholder.com/350x150" alt="350x150"></li> 
 
    <li class="imgSlide"><img src="http://via.placeholder.com/300x200" alt="300x200"></li> 
 
    <li class="imgSlide"><img src="http://via.placeholder.com/400x300" alt="400x300"></li> 
 
    </ul> 
 
    <div class="controls"> 
 
    <button type="button" id="prevSlide" role="button">Back</button> 
 
    <ul class="dot-navigation"> 
 
     <li class="dots"></li> 
 
     <li class="dots"></li> 
 
     <li class="dots"></li> 
 
    </ul> 
 
    <button type="button" id="nextSlide" role="button">Next</button></div> 
 
</div>