Javascript 无法读取属性'；removeClass'；未定义的

我正试图制作一个自动幻灯片，但这个消息不断弹出，我不明白为什么

HTML:

---

非常感谢您提供的任何建议或更正。

使用您提供的HTML，您可以假设slides变量包含3个元素。现在，在mySlides上迭代时，将索引分配给一个变量，并使用该值+1访问slides数组的一个元素。如果您当前处于mySlides数组的第3项，会发生什么情况？索引将为2，下一个将设置为3。由于幻灯片只有3个值，因此只能访问幻灯片[2]，因此代码试图访问当前未定义的幻灯片索引

首先，在定义mySlides之后，应该调用autoSlideshow（）。然后，当next超出边界时，重新初始化next的值。调用autoSlideshow的最佳方法是将其从方法中移除：

function autoSlideshow() {
    var index;
    var next;

    mySlides.each(function() {
        if ($(this).hasClass('show')) {
            index = $(this).index();
            next = index + 1;
            next = next >= mySlides.length ? 0 : next;

            //DO WHAT YOU WERE DOING
        };
    });

};

setInterval(autoSlideshow, 3000);

---

非常接近，只是几件事

您正在迭代所有幻灯片，更新所有幻灯片

function autoSlideshow() {
  mySlides.each(function () { //code snipped }
}

这是在所有幻灯片上循环，每次迭代都会将下一张幻灯片设置为可见，因此当循环结束时，您就回到了开始的位置

每次调用该函数时，您都会添加一个新计时器

function autoSlideshow() {
  //code snipped
  setInterval(autoSlideshow, 3000);
};

每次调用此函数时，都会添加另一个计时器以再次调用它。只需使用一次

setInterval（）

CSS更新 将类设置为

display:none要求您在每次更新幻灯片时删除该类。更好的方法是使用
display:none是幻灯片中图像的默认属性。然后您只需要添加
show
类，而不用担心删除隐藏类

更新代码：
JavaScript

$(document).ready(function() { //wait until the DOM is ready...
  var mySlides = $('#slideshow .slide');
  var slides = [];
  var index = 0;

  mySlides.each(function () {
    slides.push($(this));
  });

  function autoSlideshow() {
    index++;
    var nextSlide = index%slides.length;  //the mod function makes sure you stay within the bounds of the array
    $('.show').removeClass('show'); //remove the show class from the existing slide
    slides[nextSlide].addClass('show'); //add the show class to the next slide
  };
  setInterval(autoSlideshow, 3000);
})

HTML

<section id="slideshow">
  <div class="auto-slideshow">
    <img src="https://unsplash.it/200/300" alt="" class="slide show">
    <img src="https://unsplash.it/200/301" alt="" class="slide">
    <img src="https://unsplash.it/200/302" alt="" class="slide">
  </div>
</section>

看到它在这个JS小提琴中工作：

希望有帮助
 您得到错误是因为您得到了一个越界索引。由于数组包含3个元素，且索引从0开始，
array[3]
将超出范围

除此之外，
$（'#slideshow.slide'）
已经为您提供了一个元素数组，因此无需为其定义额外的数组。此外，不要在函数中使用
setInterval
，因为这最终会使脚本崩溃，因为它会被一次又一次地调用，而不会清除它。在幻灯片放映功能中，不要调用
每个
，因为这将一次性更新每张幻灯片。您要做的是在调用函数时，隐藏所有幻灯片并仅显示当前索引

当索引到达数组末尾时，将其重置为0以重新开始

.hide
类似乎是多余的，只需在
幻灯片中添加一个
显示：none

这样做可以：


var mySlides=$（'#slideshow.slide'）；
//起始索引是什么
var slideIndex=$（'#slideshow.show'）.index（）；
//有多少张幻灯片
var noOfSlides=mySlides.length；
函数autoSlideshow（）{
//删除所有幻灯片的“show”类
mySlides.removeClass（'show'）；
//仅将“show”类添加到具有slideIndex索引的幻灯片
mySlides.eq（slideIndex）.addClass（'show'）；
//更新索引
slideIndex++；
//在0重新启动
如果（滑动索引>=无滑动）
slideIndex=0；
};
自动滑动显示（）；
设置间隔（自动滑动显示，3000）
。幻灯片{
显示：无；
}
.表演{
显示：块；
}

因为如果超过了slides的数量，那么next可能是未定义的，这可能是因为slides[next]是一个JavaScript对象而不是jQuery对象。您可能还想使用
setTimeout
或者在函数之外执行
setInterval
。我喜欢将这两行组合为
next=（index+1）%mySlides.length这会自动结束。是的，这是一个更好的方法
$(document).ready(function() { //wait until the DOM is ready...
  var mySlides = $('#slideshow .slide');
  var slides = [];
  var index = 0;

  mySlides.each(function () {
    slides.push($(this));
  });

  function autoSlideshow() {
    index++;
    var nextSlide = index%slides.length;  //the mod function makes sure you stay within the bounds of the array
    $('.show').removeClass('show'); //remove the show class from the existing slide
    slides[nextSlide].addClass('show'); //add the show class to the next slide
  };
  setInterval(autoSlideshow, 3000);
})

<section id="slideshow">
  <div class="auto-slideshow">
    <img src="https://unsplash.it/200/300" alt="" class="slide show">
    <img src="https://unsplash.it/200/301" alt="" class="slide">
    <img src="https://unsplash.it/200/302" alt="" class="slide">
  </div>
</section>

#slideshow img { display: none; }
#slideshow img.show { display: block; }