我正在学习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>最佳答案
我再次查看了我的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()才能将文本值转换为整数。
关于javascript - JavaScript-图像 slider 按钮不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44836136/