Javascript 幻灯片控件不执行任何操作

Question

我用原生 javascript 制作了幻灯片，但下一个和上一个按钮不起作用。此外，分页点应遵循相应的幻灯片。

按下下一步按钮时，应显示下一张幻灯片等。在 devTools 中，它显示第一张幻灯片设置了要显示的样式，第一个点添加了活动 class，但是当按下 next/prev 按钮时没有任何反应。

这是我的代码：

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

<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 addEventListener 中命名函数的参数必须是不带引号和括号的函数名称：

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>

Javascript 幻灯片控件不执行任何操作

Javascript slideshow controls don't take any action

javascript

pagination

slideshow