开发者问题收集

使用数组和 for 循环的 JavaScript 轮播：为什么 slideIndex 在第一次循环后会“卡住”？

2017-09-10
494
javascript arrays for-loop

我正在尝试使用数组和 for 循环创建一个不使用 jQuery 的 javascript 图像轮播。

在 4 个对象的图像数组的末尾，“下一个按钮”返回到 array[slideIndex=0]。

类似地，当您点击数组中第一个对象上的“上一个按钮”时，它会返回数组中的最后一个对象。

这个函数似乎 几乎 可以与我现在拥有的代码一起使用。但是，它只能工作一次。在向后或向前跳到数组中的最后一个或第一个对象后，它不会继续按预期方向滚动。

您能告诉我为什么 slideIndex 在第一次跳过后没有继续使用 plusDivs() 函数进行循环吗？ 

let slides_array = document.getElementsByClassName("mySlides"); 

  let slideIndex = 0; 
  showDivs(slideIndex);
  
  function plusDivs(n) {
    slideIndex += n; 
    showDivs(slideIndex); 
  }
  
  function showDivs(slideIndex) { 
    let i; 
    
    if (slideIndex > (slides_array.length - 1)) { 
      slideIndex = 0; 
    }; 
    
    if (slideIndex < 0) { 
      slideIndex = (slides_array.length - 1); 
    }; 
    
    for (i=0; i<(slides_array.length); i++) { 
      slides_array[i].style.display = "none"; 
    } 
      
    slides_array[slideIndex].style.display = "block"; 
  }
<section class = "Slideshow">
  <div id="slide1" class="mySlides">
    <img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg">
  </div>

  <div id="slide2" class="mySlides">
    <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Shake-shiver-and-tremble-Why-dogs-do-it.jpg?itok=yvOUgQeL">
  </div>

  <div id="slide3" class="mySlides">
    <img src="https://i.kinja-img.com/gawker-media/image/upload/s--kx3d-Wgg--/c_scale,fl_progressive,q_80,w_800/ol9ceoqxidudap8owlwn.jpg">
  </div>

  <div id="slide4" class="mySlides">
    <img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/korean-jindo-dog-breed-pictures/puppy-1_680-453.jpg">
  </div>
</section>

<!-- Slideshow Buttons -->
<button class="button" onclick="plusDivs(-1)"> &#10094; </button>

<button class="button" onclick="plusDivs(+1)"> &#10095; </button>

如果我没有使用正确的技术术语，请原谅（并纠正）我——我正在尽我所能描述我当前的问题，但这可能不是描述问题的最佳方式。请指教。

2个回答

由于您有一个全局变量 slideIndex ，因此您不应将其作为函数参数传递，因为这会创建一个具有相同名称的局部变量，但对它的任何重新分配都不会影响全局变量。 

let slides_array = document.getElementsByClassName("mySlides"); 

  let slideIndex = 0; 
  showDivs(slideIndex);
  
  function plusDivs(n) {
    slideIndex += n; 
    showDivs(); /// <---- 
  }
  
  function showDivs() { /// <---- 
    let i; 
    
    if (slideIndex > (slides_array.length - 1)) { 
      slideIndex = 0; 
    }; 
    
    if (slideIndex < 0) { 
      slideIndex = (slides_array.length - 1); 
    }; 
    
    for (i=0; i<(slides_array.length); i++) { 
      slides_array[i].style.display = "none"; 
    } 
      
    slides_array[slideIndex].style.display = "block"; 
  }
<section class = "Slideshow">
  <div id="slide1" class="mySlides">
    <img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg">
  </div>

  <div id="slide2" class="mySlides">
    <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Shake-shiver-and-tremble-Why-dogs-do-it.jpg?itok=yvOUgQeL">
  </div>

  <div id="slide3" class="mySlides">
    <img src="https://i.kinja-img.com/gawker-media/image/upload/s--kx3d-Wgg--/c_scale,fl_progressive,q_80,w_800/ol9ceoqxidudap8owlwn.jpg">
  </div>

  <div id="slide4" class="mySlides">
    <img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/korean-jindo-dog-breed-pictures/puppy-1_680-453.jpg">
  </div>
</section>

<!-- Slideshow Buttons -->
<button class="button" onclick="plusDivs(-1)"> &#10094; </button>

<button class="button" onclick="plusDivs(+1)"> &#10095; </button>

或者，您可以将其作为参数传递，但请确保对全局变量进行修改（在传递参数的函数之外）。

trincot
2017-09-10

Duj 和 Trincot 提到的范围问题是这里的关键问题。将 slideIndex 的重置移出 showDivs 解决了这个问题。

创建更自解释的代码的一种方法是将 plusDivs 更改为两个函数，一个增加（ plusDivs ），另一个减少（ minusDivs ）。然后您可以在其中更新 slideIndex 。 （这两个函数使用 三元运算符 来更新 slideIndex ，这非常酷，而且易于实现）。 

let slides_array = document.getElementsByClassName("mySlides");

let slideIndex = 0;
showDivs(slideIndex);

function plusDivs() {
  slideIndex = slideIndex === slides_array.length - 1 ? 0 : slideIndex + 1;
  showDivs(slideIndex);
}

function minusDivs() {
  slideIndex = slideIndex === 0 ? slides_array.length - 1 : slideIndex - 1;
  showDivs(slideIndex);
}

function showDivs(slideIndex) {
  for (i = 0; i < slides_array.length; i++) {
    slides_array[i].style.display = "none";
  }
  slides_array[slideIndex].style.display = "block";
}

然后您可以像这样更新 HTML： 

<!-- Slideshow Buttons -->
<button class="button" onclick="minusDivs()"> &#10094; </button>
<button class="button" onclick="plusDivs()"> &#10095; </button>
andrewatkinson
2017-09-10