尝试使用方法在 OOP 中设置轮播的间隔

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: expected expression, got ':' 语法错误：缺少形式参数

编辑：我找到了一种通过像这样调整我的代码来使其工作的方法：

  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

如果我将此引用添加到 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)

Answer 2

OOP 学校项目的代码如何，我认为您可以使用更好的 OOP 方式编写代码：


    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)

尝试使用方法在 OOP 中设置轮播的间隔

Trying to set an interval for a carrousel in OOP, using methods

javascript

methods

carousel