时间戳

首页 > 解决方案 > 自动 Javascript 滑块不会在我的 Tumblr 网站上重复

javascript - 自动 Javascript 滑块不会在我的 Tumblr 网站上重复

问题描述

我在我的 Tumblr 页面上使用 w3 school 的自动滑块代码。现在，我在这里高高在上，看到有几个人在使用相同的代码时遇到了类似的问题，但不幸的是我没有找到任何解决方案。加载后，它将循环浏览 3 张幻灯片，然后消失，只留下点。你可以在http://rachelmontano.com看到

我非常肯定问题出在 javascript 上，而不是与 CSS 或 HTML 有关 - 我已经仔细检查了我所有的类是否匹配，并且我没有任何随机/不必要的 HTML 浮动或任何东西. 在完成循环并消失之前，检查中没有错误。一旦发生这种情况，这就是我得到的错误，但我不知道如何破译这个大声笑>>我是一个 JS 菜鸟，我很抱歉<<

Uncaught TypeError: Cannot read property 'style' of undefined
    at showSlides ((index):985)

showSlides  @   (index):985
setTimeout (async)      
showSlides  @   (index):987
setTimeout (async)      
showSlides  @   (index):987
setTimeout (async)      
showSlides  @   (index):987
(anonymous) @   (index):971

这是JS片段

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("slips");
  var dots = document.getElementsByClassName("bottomdots");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" activedot", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " activedot";
  setTimeout(showSlides, 3000); // Change image every 2 seconds
}
</script>

编辑：这是我的网站代码的屏幕截图，您可以看到 {slideIndex=1} 在我的网站代码中，但是一旦您在检查中检查它，显然有些东西正在设法将其删除！？！？我什至不...

截屏

标签： javascriptslidercarouselslideshowtumblr

解决方案

devTools 中的代码

您在slideIndex = 1这里错过了第 12 行。在您编写的问题中，但在检查您的网站时，我注意到只有 if 语句没有正文。将其更改为if (slideIndex > slides.length) {slideIndex = 1}. 希望这会奏效！

推荐阅读