怎样开发一个轮播图插件_JavaScript轮播图插件开发完整教程

<div class="carousel" id="myCarousel">
  <div class="carousel-inner">
    <div class="carousel-item active"><img src="1.jpg" alt=""></div>
    <div class="carousel-item"><img src="2.jpg" alt=""></div>
    <div class="carousel-item"><img src="3.jpg" alt=""></div>
  </div>
  <button class="prev"><</button>
  <button class="next">></button>
  <div class="indicators">
    <span data-index="0" class="active"></span>
    <span data-index="1"></span>
    <span data-index="2"></span>
  </div>
</div>

function Carousel(element, options) {
  this.element = typeof element === 'string' ? document.querySelector(element) : element;
  this.items = this.element.querySelectorAll('.carousel-item');
  this.indicators = this.element.querySelectorAll('.indicators span');
<p>this.options = {
autoplay: true,
interval: 3000,
...options
};</p><p>this.currentIndex = 0;
this.timer = null;</p><p>this.init();
}</p>

Carousel.prototype.init = function() {
  this.bindEvents();
  if (this.options.autoplay) {
    this.startAutoplay();
  }
};
<p>Carousel.prototype.bindEvents = function() {
const prevBtn = this.element.querySelector('.prev');
const nextBtn = this.element.querySelector('.next');</p><p>prevBtn.addEventListener('click', () => this.prev());
nextBtn.addEventListener('click', () => this.next());</p><p>this.indicators.forEach((dot, index) => {
dot.addEventListener('click', () => this.goTo(index));
});
};</p>

Carousel.prototype.next = function() {
  this.currentIndex = (this.currentIndex + 1) % this.items.length;
  this.update();
};
<p>Carousel.prototype.prev = function() {
this.currentIndex = (this.currentIndex - 1 + this.items.length) % this.items.length;
this.update();
};</p><p>Carousel.prototype.goTo = function(index) {
if (index >= 0 && index < this.items.length) {
this.currentIndex = index;
this.update();
}
};</p><p>Carousel.prototype.update = function() {
// 切换 item
this.element.querySelector('.carousel-item.active').classList.remove('active');
this.element.querySelector('.indicators .active').classList.remove('active');</p><p>this.items[this.currentIndex].classList.add('active');
this.indicators[this.currentIndex].classList.add('active');</p><p>// 重置自动播放计时器
if (this.options.autoplay) {
this.resetAutoplay();
}
};</p>

Carousel.prototype.startAutoplay = function() {
  this.timer = setInterval(() => {
    this.next();
  }, this.options.interval);
};
<p>Carousel.prototype.resetAutoplay = function() {
clearInterval(this.timer);
this.startAutoplay();
};</p>

new Carousel('#myCarousel', {
  autoplay: true,
  interval: 4000
});