自动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}在我的网站代码中，但是一旦您将其检查完毕，显然可以设法删除它！我什至没有...

screenshot

解决方法

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

,

我发表评论后，我去了您的网站并复制了我需要的代码，并将其制作为JSFIDDLE

关键是正如roittimi所指出的，在您的if语句之后没有条件。唯一需要的更改是：

  if (slideIndex > slides.length) {
      slideIndex = 1
  }

我还为占位符更改了几张图像，以便您可以看到它们的过渡。

,

我认为代码的其他部分也有一些干扰。该主题不是我自己的，并且Inspect显示了与该滑块无关的主题代码部分错误。但是，从那时起，我就开始编写自己的新主题，并在其中放置相同的代码，所有问题都解决了。我仍然无法告诉您为什么这些问题会导致完全不相关的JavaScript代码段中的if语句主体完全消失。