当我使用 javascript 事件时自动幻灯片不会停止

Question

我写了一个脚本来制作自动幻灯片，我希望它在我点击（或鼠标悬停）图像（或内容）时停止，但它对我不起作用。如果我的代码中有任何错误，请有人告诉我。谢谢！

这是我的代码：

var slideIndex =1;
showslides(slideIndex);
function plusslide(n){
 showslides(slideIndex+=n);
};
function showslides(n){
 var i;
 var slides = document.getElementsByClassName("fade");
 if (n>slides.length){ slideIndex=1};
 if(n<1){slideIndex=slides.length};
 for (i=0; i<slides.length; i++){
  slides[i].style.display = "none";
 }
 slides[slideIndex-1].style.display = "block";
};

var interval=setInterval(function(){slideIndex+=1; showslides(slideIndex);},1000);
document.getElementsByClassName("fade").onclick=function(){stop()};
function stop(){
 clearInterval(interval);
};

<body>
 <div class="page">
  <div class="container">
    <div class="content">
   <div class="fade">
    <img src="#" />
    <p>1/3</p>
   </div>
   <div class="fade">
    <img src="#" />
    <p>2/3</p>
   </div>
   <div class="fade">
    <img src="#" />
    <p>3/3</p>
   </div>
    <a class="prev" onclick="plusslide(-1)">&#10094;</a>
    <a class="next" onclick="plusslide(1)">&#10095;</a> 
    </div>
     </div>
 </div>
 <script type="text/javascript" src="slide.js"></script>
</body>

Answer 1

您的代码中有一个小错字。将 getElementsbyClassName 替换为 getElementsByClassName.

您以后可以使用浏览器的开发人员控制台来捕获此类错误，它会告诉您代码中的错误位置以及错误类型。只需搜索 Developer Tools，它会帮助您自己发现并修复此类错误。

编辑：

哦，是的，没看到那个。这一行确实也有错误：

document.getElementsByClassName("fade").onclick=function(){stop()};

问题来了。 getElementsByClassName 不是 return 一个 DOM 元素，而是一个元素数组，因为有多个元素具有 class 名称。您必须遍历每一个才能访问它们的 onclick ，就像您在上面的函数中所做的那样：

var slides = document.getElementsByClassName("fade");
for (var i = 0; i < slides.length; i++) {
    slides[i].onclick = stop;
}

此外，小旁注：我在回答中将 function(){stop()} 缩短为 stop。因为你只在onclick中调用那个函数而不带任何参数，所以你可以直接将stop绑定到onclick。

当我使用 javascript 事件时自动幻灯片不会停止

Automatic Slideshow not stop when i use javascript event

html

javascript

slideshow