单页多轮播组件JavaScript冲突问题求助

我尝试用以下代码实现多图片轮播，但只有单个轮播能正常工作。我试着把ID改成类，还想用$(this)把函数绑定到对应的轮播组件，但作为JavaScript新手，实在搞不定，求帮忙！

修改后的完整解决方案 #

你的原代码是单实例设计，所有状态和DOM选择都是全局的，导致多个轮播互相干扰。下面是修改后的代码，将轮播封装为独立实例，支持多个轮播同时工作：

HTML（支持多轮播）

<!-- 第一个轮播 -->
<div class="slider-outer">
  <div class="slider-inner slider-transition">
    <div class="slider-item" data-position="1">轮播1-项目1</div>
    <div class="slider-item" data-position="2">轮播1-项目2</div>
    <div class="slider-item" data-position="3">轮播1-项目3</div>
  </div>
  <button class="slider-btn slider-prev" data-slider="0">上一项</button>
  <button class="slider-btn slider-next" data-slider="0">下一项</button>
</div>

<!-- 第二个轮播 -->
<div class="slider-outer">
  <div class="slider-inner slider-transition">
    <div class="slider-item" data-position="1">轮播2-项目1</div>
    <div class="slider-item" data-position="2">轮播2-项目2</div>
    <div class="slider-item" data-position="3">轮播2-项目3</div>
    <div class="slider-item" data-position="4">轮播2-项目4</div>
  </div>
  <button class="slider-btn slider-prev" data-slider="1">上一项</button>
  <button class="slider-btn slider-next" data-slider="1">下一项</button>
</div>

CSS（改用类选择器）

.slider-outer {
  overflow: hidden;
  margin: 20px 0;
  width: 400px;
  border: 1px solid #ddd;
}

.slider-inner {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

.slider-transition {
  transition: transform 0.7s ease-in-out;
}

.slider-item {
  width: 100%;
  flex-shrink: 0;
  padding: 40px;
  text-align: center;
  background: #f5f5f5;
}

JavaScript（封装为类，支持多实例）

class FlexSlider {
  constructor(outerElement) {
    // 当前实例的根元素
    this.outer = outerElement;
    // 当前实例的内部容器
    this.inner = outerElement.querySelector('.slider-inner');
    // 当前实例的轮播项
    this.items = outerElement.querySelectorAll('.slider-item');
    // 轮播项总数
    this.numItems = this.items.length;
    // 当前显示项的位置
    this.current = 1;
    this.direction = '';

    this.init();
  }

  init() {
    // 初始化每个轮播项的order
    this.items.forEach((element, index) => {
      element.style.order = index + 1;
    });
  }

  // 绑定当前实例的按钮事件
  bindButtons(prevBtn, nextBtn) {
    nextBtn.addEventListener('click', () => {
      this.direction = 'next';
      this.gotoNext();
    });

    prevBtn.addEventListener('click', () => {
      this.direction = 'prev';
      this.gotoPrev();
    });

    // 监听当前实例的过渡结束事件
    this.inner.addEventListener('transitionend', () => {
      if (this.direction === 'next') {
        this.changeOrderNext();
      } else {
        this.changeOrderPrev();
      }
    });
  }

  changeOrderNext() {
    // 更新当前位置
    this.current = this.current === this.numItems ? 1 : this.current + 1;
    let order = 1;

    // 重新排序从当前位置到最后
    for (let i = this.current; i <= this.numItems; i++) {
      this.outer.querySelector(`.slider-item[data-position="${i}"]`).style.order = order;
      order++;
    }

    // 重新排序从开头到当前位置前一个
    for (let i = 1; i < this.current; i++) {
      this.outer.querySelector(`.slider-item[data-position="${i}"]`).style.order = order;
      order++;
    }

    // 重置位置，关闭过渡避免触发额外事件
    this.inner.classList.remove('slider-transition');
    this.inner.style.transform = 'translateX(0)';
  }

  gotoNext() {
    // 开启过渡并移动到下一项
    this.inner.classList.add('slider-transition');
    this.inner.style.transform = 'translateX(-100%)';
  }

  changeOrderPrev() {
    // 更新当前位置
    this.current = this.current === 1 ? this.numItems : this.current - 1;
    let order = 1;

    // 重新排序从当前位置到最后
    for (let i = this.current; i <= this.numItems; i++) {
      this.outer.querySelector(`.slider-item[data-position="${i}"]`).style.order = order;
      order++;
    }

    // 重新排序从开头到当前位置前一个
    for (let i = 1; i < this.current; i++) {
      this.outer.querySelector(`.slider-item[data-position="${i}"]`).style.order = order;
      order++;
    }

    // 重置位置，关闭过渡避免触发额外事件
    this.inner.classList.remove('slider-transition');
    this.inner.style.transform = 'translateX(0)';
  }

  gotoPrev() {
    // 开启过渡并移动到上一项
    this.inner.classList.add('slider-transition');
    this.inner.style.transform = 'translateX(100%)';
  }
}

// 初始化所有轮播实例
const sliders = [];
document.querySelectorAll('.slider-outer').forEach((outer, index) => {
  const slider = new FlexSlider(outer);
  sliders.push(slider);
  // 绑定对应按钮
  const prevBtn = document.querySelector(`.slider-prev[data-slider="${index}"]`);
  const nextBtn = document.querySelector(`.slider-next[data-slider="${index}"]`);
  slider.bindButtons(prevBtn, nextBtn);
});

关键修改说明 #

1. 封装为类：每个轮播是独立的FlexSlider实例，拥有专属的current、numItems等状态，互不干扰。
2. 实例化DOM选择：所有DOM操作基于当前实例的根元素this.outer，不再使用全局选择器，避免跨轮播元素冲突。
3. 按钮与轮播绑定：通过data-slider属性标记按钮对应的轮播索引，初始化时完成绑定。
4. 独立事件监听：每个实例只监听自己容器的transitionend事件，不会触发其他轮播的逻辑。

内容的提问来源于stack exchange，提问作者micode