javascript - JavaScript-图像 slider 按钮不起作用

Question

我正在学习JavaScript。现在，我想制作一个典型的图像滑块，当页面加载时它会自动启动，并且如果单击两个按钮（向前和向后）之一，它将停止自动滑块，然后转到我们单击按钮的位置。

但是我正在测试的代码没有使按钮起作用。我什至使用jQuery尝试使其工作，但没有成功。我认为我已经一团糟，但这是代码：

$(function() {
  var slideIndex = 0;
  var i;
  var s = document.getElementsByClassName("slide");
  var stopslider = false;
  slider();
  
  $(".change[n]").click(function(){
    var slideIndex = 1;
    var stopslider = true;
    $( "slide1" ).removeClass( "slide" ).addClass( "1slide" );
    $( "slide2" ).removeClass( "slide" ).addClass( "1slide" );
    $( "slide3" ).removeClass( "slide" ).addClass( "1slide" );
    $( "slide4" ).removeClass( "slide" ).addClass( "1slide" );
    var s = document.getElementsByClassName("1slide");
    slideslide1Index += n;
    if (n > s.length) {
      slideIndex = 1
    } 
    if (n < 1) {
      slideIndex = s.length
    } ;
    for (i = 0; i < s.length; i++) {
      s[i].style.display = "none"; 
    }
    s[slideIndex-1].style.display = "block"; 
  });
  
  function slider() {
    for (i = 0; i < s.length; i++) {
      s[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > s.length) {
      slideIndex = 1
    }
    s[slideIndex-1].style.display = "block";
    setTimeout(slider, 4000);
    if (stopslider= true) {
      clearTimeout(slider);
    } 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="imagem1"><img id="slide1" class="slide" src="imagens/imagemcentral1.jpg"></a>
<a href="imagem2"><img id="slide2" class="slide" src="imagens/imagemcentral2.jpg"></a>
<a href="imagem3"><img id="slide3" class="slide" src="imagens/imagemcentral3.jpg"></a>
<a href="imagem4"><img id="slide4" class="slide" src="imagens/imagemcentral4.jpg"></a>

<button id="previous" class="change" n="-1">previous</button>
<button id="latter" class="change" n="+1">latter</button>

Answer 1

我再次查看了我的first answer并意识到，这可能完全不是您要的内容。
因此，在这里，我将尽可能地忠于您的原始代码。

有关说明，请参见代码段下方的注释。

window.onload = function() {
  var slideIndex = 0;
  var stopslider = false;
  slider();
  
  function change(n) {
    stopslider = true;
    var s = document.getElementsByClassName("slide");
    slideIndex += n;
    if (slideIndex > s.length) {
      slideIndex = 1;
    } else if (slideIndex < 1) {
      slideIndex = s.length;
    }
    for (var i=0; i<s.length; i++) {
      s[i].style.display = "none";
    }
    s[slideIndex-1].style.display = "block";
  }
  
  function slider() {
    if (stopslider == false) {
      var s = document.getElementsByClassName("slide");
      for (var i=0; i<s.length; i++) {
        s[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > s.length) {
        slideIndex = 1;
      }
      s[slideIndex-1].style.display = "block";
      setTimeout(slider, 4000);
    }
  }
  
//CLICK-HANDLERS-------------------------
  document.getElementById("previous").onclick = function(){change(-1);};
  document.getElementById("latter").onclick = function(){change(+1);};
};

<a class="slide" href="imagem1"><img src="https://placeimg.com/200/150/animals"></a>
<a class="slide" href="imagem2"><img src="https://placeimg.com/200/150/arch"></a>
<a class="slide" href="imagem3"><img src="https://placeimg.com/200/150/people"></a>
<a class="slide" href="imagem4"><img src="https://placeimg.com/200/150/tech"></a>

<button id="previous" class="change">previous</button>
<button id="latter" class="change">latter</button>

jsfiddle： https://jsfiddle.net/Lkeaejkn/


因为您说过最初您是用纯JS编码的，所以我恢复了所有jQuery。
因此 $(function() {变为 window.onload = function() {。
我删除了全局变量 var s = document.getElementsByClassName("slide");。您可以使用它，但是由于您已经在一个函数中声明了它，并且通常希望将全局变量保持为最小值（ link1， link2），因此我选择删除全局变量。
同样的原因，我也删除了 var i;。最好在for循环中声明它们。
在HTML，纯JS或jQuery中，我都不熟悉 <button class="change" n="+1">和 ".change[n]"。我认为这是不可能的（如果我错了，请纠正我）。
您不能仅仅组成自己的HTML属性。好吧，您可以使用 data-* attribute。您可以使用它们，如果需要，请查看下面的第二个代码片段。
在此代码段中，我选择了另一种使用JS内部onclick-handlers的方法。
（将所有HTML和JS分开是一种较好的做法，因此，此选项可能更好。但是，对于此选项，您确实需要给按钮 id-已经使用过。） -属性，则不需要这些 id。）
在您的JS中，将 $(".change[n]").click(function(){更改为常规函数： function change(n) {，其中 n保留 +1或 -1的值，该值确定滑块的方向。
在代码的底部，我添加了两个单击处理程序，它们都调用函数 change(n)，并随同参数 n发送，其值分别为 -1或 +1。
在函数 change(n)中，我删除了 var slideIndex = 1;，因为这将覆盖/干扰您在脚本开始时已经声明的全局变量 var slideIndex。
不幸的是，该变量必须保持全局，否则每次调用函数 change(n)时都将重置该值，并且幻灯片将永远不会改变。这是我创建第一个答案以避免全局变量的原因之一。如果您有兴趣，请签出 that one。

我从 var中删除​​了 var stopslider = true;。 var创建一个仅在函数内部可见的新变量（因此不是全局变量），但是在这种情况下，我们确实需要引用全局 var stopslider，因为这是在函数 slider()内部检查的变量确定是否应停止自动滑动器。
我删除了所有 $( "slide1" ).removeClass( "slide" ).addClass( "1slide" );。我不知道您在那儿尝试什么，但这不是必需的。 （此外， id的jQuery选择器在 #前面需要一个 id，因此： $("#slide1")）。
我还继续从HTML幻灯片中删除了所有 id，因为它们不是必需的，并且当您以后要插入更多幻灯片时，可以省去很多麻烦。
我还从 1中删除​​了 var s = document.getElementsByClassName("1slide");，也不知道您在做什么。
我还将 class="slide"从 <img/>移到了 <a>，因为否则图像将被隐藏，但是所有图像的 <a>仍然可见，这不是您想要的。
您实际上不需要图像或滑块本身的 <a>，但是您可能有特定的用途，所以我将其保留。
我将 slideslide1Index += n;更改为 slideIndex += n;，因此它引用了全局变量。

在所有if子句中，您检查 n： if (n > s.length) {，但是您应该检查 slideIndex。请记住， n的值只能是 -1或 +1。全局 slideIndex保存当前幻灯片的值。
我将两个if子句组合成一个if-else： } else if (slideIndex < 1) {。因为这两个子句中只有一个可以为真，所以每次调用 change(n)时都不能同时运行它们。并且这也直接（向读取代码的程序员显示）这两个子句在一起，是一项较大检查的一部分。
您有错字： } ;，我删除了它。
就像我之前说的，最好在for循环中声明 i，这样就变成了： for (var i=0; i<s.length; i++) {（与功能 slider()相同）。
在函数 slider()中，因为删除了全局 var s = document.getElementsByClassName("slide");，所以必须像 change(n)一样在该函数的顶部添加该行。
在从句条件下，我将 if (stopslider= true) {更改为 if (stopslider == true) {。
由于已经使用 =分配值，因此在编程中，我们使用 ==（双精度 =）检查两个值是否相等。
为了能够清除超时，不幸的是，您在设置计时器时首先需要存储对该计时器的全局引用，因此： timer = setTimeout(slider,4000);，其中 timer是您在开始时设置的全局 var。您的脚本。
幸运的是，我们实际上不需要清除计时器。因为 setTimeout()仅运行一次，然后停止，所以我们无需再次设置它。
为此，只需将函数 slider()中的所有代码放在您在 clearTimeout()周围使用的if子句中，只需将 true更改为 false： if (stopslider == false) {。
（如果仅将其放置在 setTimeout()周围，则第一次单击按钮后，滑块仍会自动再更改一次。）


我更改了图像的 src，以便我们可以实际看到它们的变化。



使用 data-属性的代码段：

此代码段基于上一个代码段，并进行了一些更改。

window.onload = function() {
  var slideIndex = 0;
  var stopslider = false;
  slider();
  
  function slider() {
    if (stopslider == false) {
      var s = document.getElementsByClassName("slide");
      for (var i=0; i<s.length; i++) {
        s[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > s.length) {
        slideIndex = 1;
      }
      s[slideIndex-1].style.display = "block";
      setTimeout(slider, 4000);
    }
  }
  
//CLICK-HANDLERS-------------------------
  (function() {
    var c = document.getElementsByClassName("change");
    for (var i=0; i<c.length; i++) {
      c[i].onclick = function() {
        stopslider = true;
        var n = parseInt(this.getAttribute("data-n"));
        var s = document.getElementsByClassName("slide");
        slideIndex += n;
        if (slideIndex > s.length) {
          slideIndex = 1;
        } else if (slideIndex < 1) {
          slideIndex = s.length;
        }
        for (var i=0; i<s.length; i++) {
          s[i].style.display = "none";
        }
        s[slideIndex-1].style.display = "block";
      };
    }
  })();
};

<a class="slide" href="imagem1"><img src="https://placeimg.com/200/150/animals"></a>
<a class="slide" href="imagem2"><img src="https://placeimg.com/200/150/arch"></a>
<a class="slide" href="imagem3"><img src="https://placeimg.com/200/150/people"></a>
<a class="slide" href="imagem4"><img src="https://placeimg.com/200/150/tech"></a>

<button class="change" data-n="-1">previous</button>
<button class="change" data-n="+1">latter</button>

jsfiddle： https://jsfiddle.net/Lkeaejkn/2/


在HTML中，我在各自的按钮中添加了 data-n="-1"和 data-n="+1"，并从按钮中删除了 id，因为它们不再需要了。 Read about the data-* attribute
在JS中，我删除了旧的基于id的单击处理程序，而是将整个函数 change(n)更改为按钮的匿名单击处理程序。
我将点击处理程序包装在 self-executing anonymous function中，以防止出现更多全局变量： (function() { ... })();。
然后，我使用与幻灯片相同的原理，但是现在要遍历按钮。
然后为每个按钮绑定实际的单击处理程序： c[i].onclick = function() {。
在点击处理程序内部，使用 var n = parseInt(this.getAttribute("data-n"));从相应按钮获取 n值。
由于来自 data-n属性的数据为文本格式，因此需要 parseInt()才能将文本值转换为整数。