Question

我已经为自定义轮播编写了一些JS，并且希望能够在同一页面上使用无限多个此实例

我知道循环遍历实例的概念，以及执行此操作的几种不同方法，但是在使它作为JS初学者工作时遇到了一些麻烦

示例：https://codepen.io/kempster/pen/rNOwMaB

JS：

  var prev  = document.querySelector('.prev');
  var next  = document.querySelector('.next');
  var counter = document.querySelector('.counter');
  var slides = document.querySelectorAll(".slide");
  var currentSlide = 0;

  function prevSlide(){
    slides[currentSlide].className = 'slide';

    if (currentSlide === 0 ) {
      currentSlide = slides.length - 1;
    } else {
      window.currentSlide--;
    }   
    slides[currentSlide].className = 'slide active';
    updateCounter();
    sliderWrapper.style.width = slides[currentSlide].clientWidth + 'px';
    sliderWrapper.style.height = slides[currentSlide].clientHeight + 'px';
  } 

  function nextSlide(){
    slides[currentSlide].className = 'slide';
    window.currentSlide++;
    window.currentSlide %= window.slides.length;
    slides[currentSlide].className = 'slide active';
    updateCounter();
    sliderWrapper.style.width = slides[currentSlide].clientWidth + 'px';
    sliderWrapper.style.height = slides[currentSlide].clientHeight + 'px';
  } 

  window.onload = function load() {
    sliderWrapper.style.width = slides[currentSlide].clientWidth + 'px';
    sliderWrapper.style.height = slides[currentSlide].clientHeight + 'px';
    counter.innerHTML = (currentSlide + 1) + ' / ' + slides.length;
  }

  function updateCounter() {
    counter.innerHTML = (currentSlide + 1) + ' / ' + slides.length;
  }

  prev.addEventListener('click', () => prevSlide());
  next.addEventListener('click', () => nextSlide());

Answer 1

我想您用某些类或ID来标识HTML上的不同轮播。我建议将某个对象存储在某个地方（localStorage，窗口，任何适合您的需求）：

const carousels = [
  {
    id: id
    prev: document.querySelector('.prev');
    next: document.querySelector('.next');
    counter: document.querySelector('.counter');
    slides: document.querySelectorAll(".slide");
    currentSlide: 0;
  },
  {
    // Etc...
  }
];

或者这个：

const carousels = {
  1: {
    prev: document.querySelector('.prev');
    next: document.querySelector('.next');
    counter: document.querySelector('.counter');
    slides: document.querySelectorAll(".slide");
    currentSlide: 0;
  },
  2: {
    // Etc...
  }
};

这样，您可以在页面上和事件内部保留对所有轮播的所有相关信息的引用，可以检查触发事件的轮播的ID /类，并在正确的轮播元素上使用您的方法。

您还应该确保在每种情况下都选择相关的幻灯片和按钮，而不是像现在一样选择所有的幻灯片和按钮。

这是一个快速的解决方案，但希望对您有所帮助。

如何遍历JS组件的多个实例

1 个答案: