Question

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

按下一个按钮时，应显示下一张幻灯片，依此类推。在devTools中，它显示第一张幻灯片的样式设置为显示，第一个点添加了活动类，但是当按下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幻灯片控件不执行任何操作

1 个答案: