Попытка установить интервал для карусели в ООП, используя методы

Question

Для школьного проекта я кодирую слайд-шоу, и часть JavaScript должна использовать объектно-ориентированное программирование - у меня есть метод "nextSlide", который переключается между изображениями для анимации карусели, и я хочу, чтобы анимация выполнялась автоматически каждые 5 секунд:

Я попробовал следующий код, но он, кажется, не работает,

var diaporama = {
  slides : document.querySelectorAll('#slides .slide'),
  currentSlide : 0,

  nextSlide : function() {
      slides[currentSlide].className = 'slide';
      currentSlide = (currentSlide+1)%slides.length;
      slides[currentSlide].className = 'slide showing';
  },
  slideInterval : function() {
    setInterval(this.nextSlide(), 5000)
  }
}

diaporama.slideInterval();

Анимация не выполняется, и Firefox выдает мне следующую ошибку: SyntaxError: ожидаемое выражение, got ':' SyntaxError: отсутствует формальный параметр

Редактировать: я нашел способ заставить его работать, изменяя мой код следующим образом:

  nextSlide : function() {
      this.slides[this.currentSlide].className = 'slide';
      this.currentSlide = (this.currentSlide+1)%this.slides.length;
      this.slides[this.currentSlide].className = 'slide showing';
  }

}

var myVar = setInterval("diaporama.nextSlide()", 5000)

Answer 1

как код для школьного проекта ООП, я думаю, вы могли бы использовать лучший способ ООП написать свой код:

    class Diaporama {
        constructor(containerSelector, itemSelector, interval) {

            var _containerSelector = containerSelector;
            var _itemSelector = itemSelector;
            var _interval = interval;

            var _slides = document.querySelectorAll(selector);
            var _currentSlide = 0;

            setSlideInterval();
        }

        get slides() {
            return this._slides;
        }

        set slides(value) {
            this._slides = value;
        }

        get currentSlide() {
            return this._currentSlide;
        }

        set currentSlide(value) {
            this._slid_currentSlidees = value;
        }

        get containerSelector() {
            return this._containerSelector;
        }

        get itemSelector() {
            return this._itemSelector;
        }

        get interval() {
            return this._interval;
        }

        nextSlide() {
            slides[currentSlide].className = this.itemSelector;
            currentSlide = (currentSlide + 1) % slides.length;
            slides[currentSlide].className = this.itemSelector + ' showing';
        }

        setSlideInterval() {
            setInterval(this.nextSlide(), this.interval);
        }
    }
    //instance
    var mySlide = new Diaporama('#slides', '.slide', 5000);

Вот ссылки на классы JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Синтаксис get связывает свойство объекта с функцией, которая будет вызываться при поиске этого свойства (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get)

Синтаксис set связывает свойство объекта с функцией, вызываемой припри попытке установить это свойство (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set)

Answer 2

Это работает, если я добавлю эту ссылку в функцию nextSlide:

  nextSlide : function() {
      this.slides[this.currentSlide].className = 'slide';
      this.currentSlide = (this.currentSlide+1)%this.slides.length;
      this.slides[this.currentSlide].className = 'slide showing';
  }

}

var myVar = setInterval("diaporama.nextSlide()", 5000)