如何封装JavaScript轮播代码实现函数间参数传递？

你的问题核心是作用域隔离：buttonsControl()里的变量是局部变量，外部的prev()和next()根本访问不到。直接传参数会触发函数立即执行，是因为你把函数调用结果（不是函数本身）传给了事件监听器。下面给你三种可行的修复方案：

方案1：把prev/next函数放到buttonsControl内部（最推荐） #

利用JavaScript的闭包特性，内部函数可以直接访问外部函数的局部变量，代码结构也更紧凑：

function buttonsControl(){
  const slides = document.querySelector('.slides');
  const totalItems = document.querySelectorAll('.slides>*').length - 1;
  const allItems = document.querySelectorAll('.slides>*').length;
  let activeItem = 0;

  let controlCarouselFooter = document.querySelector('.carousel_footer');
  controlCarouselFooter.innerHTML = `1 / ${allItems}`;

  // 直接在内部定义prev和next
  function prev(){
    if (activeItem === 0) {
      activeItem = totalItems;
      slides.style.transform = `translateX(-${totalItems * 100}%)`;
      controlCarouselFooter.innerHTML = `${activeItem+1} / ${allItems}`;
    } else {
      activeItem--;
      slides.style.transform = `translateX(-${activeItem * 100}%)`;
      controlCarouselFooter.innerHTML = `${activeItem+1} / ${allItems}`;
    }
  }

  function next(){
    if(activeItem < totalItems) {
      activeItem++;
      slides.style.transform = `translateX(-${activeItem * 100}%)`;
      controlCarouselFooter.innerHTML = `${activeItem+1} / ${allItems}`;
    } else {
      activeItem = 0;
      slides.style.transform = 'none';
      controlCarouselFooter.innerHTML = `${activeItem+1} / ${allItems}`;
    }
  }

  // 绑定事件监听器
  document.querySelector('.prev_button').addEventListener('click', prev);
  document.querySelector('.next_button').addEventListener('click', next);
}

buttonsControl();

方案2：用箭头函数包裹，传递参数 #

如果不想把函数放到内部，可以用箭头函数作为事件处理函数，在点击时再调用prev/next并传参。注意activeItem是可修改的变量，需要用引用类型（比如对象）传递，否则传的是值的副本，修改后不会同步：

function buttonsControl(){
  const slides = document.querySelector('.slides');
  const totalItems = document.querySelectorAll('.slides>*').length - 1;
  const allItems = document.querySelectorAll('.slides>*').length;
  // 用对象包裹activeItem，确保是引用传递
  const state = { activeItem: 0 };

  let controlCarouselFooter = document.querySelector('.carousel_footer');
  controlCarouselFooter.innerHTML = `1 / ${allItems}`;

  // 用箭头函数包裹，点击时才调用prev/next
  document.querySelector('.prev_button').addEventListener('click', () => {
    prev(slides, totalItems, allItems, state, controlCarouselFooter);
  });
  document.querySelector('.next_button').addEventListener('click', () => {
    next(slides, totalItems, allItems, state, controlCarouselFooter);
  });
}

function prev(slides, totalItems, allItems, state, controlCarouselFooter){
  if (state.activeItem === 0) {
    state.activeItem = totalItems;
    slides.style.transform = `translateX(-${totalItems * 100}%)`;
    controlCarouselFooter.innerHTML = `${state.activeItem+1} / ${allItems}`;
  } else {
    state.activeItem--;
    slides.style.transform = `translateX(-${state.activeItem * 100}%)`;
    controlCarouselFooter.innerHTML = `${state.activeItem+1} / ${allItems}`;
  }
}

function next(slides, totalItems, allItems, state, controlCarouselFooter){
  if(state.activeItem < totalItems) {
    state.activeItem++;
    slides.style.transform = `translateX(-${state.activeItem * 100}%)`;
    controlCarouselFooter.innerHTML = `${state.activeItem+1} / ${allItems}`;
  } else {
    state.activeItem = 0;
    slides.style.transform = 'none';
    controlCarouselFooter.innerHTML = `${state.activeItem+1} / ${allItems}`;
  }
}

buttonsControl();

方案3：用类封装（更规范的组件写法） #

如果想做更完整的封装，用类来管理轮播的状态和方法是更专业的方式：

class Carousel {
  constructor() {
    this.slides = document.querySelector('.slides');
    this.totalItems = document.querySelectorAll('.slides>*').length - 1;
    this.allItems = document.querySelectorAll('.slides>*').length;
    this.activeItem = 0;
    this.controlCarouselFooter = document.querySelector('.carousel_footer');
    
    this.init();
  }

  init() {
    this.controlCarouselFooter.innerHTML = `1 / ${this.allItems}`;
    this.bindEvents();
  }

  bindEvents() {
    // 注意要绑定this上下文，否则类方法里的this会指向事件对象
    document.querySelector('.prev_button').addEventListener('click', () => this.prev());
    document.querySelector('.next_button').addEventListener('click', () => this.next());
  }

  prev() {
    if (this.activeItem === 0) {
      this.activeItem = this.totalItems;
      this.slides.style.transform = `translateX(-${this.totalItems * 100}%)`;
    } else {
      this.activeItem--;
      this.slides.style.transform = `translateX(-${this.activeItem * 100}%)`;
    }
    this.updateFooter();
  }

  next() {
    if(this.activeItem < this.totalItems) {
      this.activeItem++;
      this.slides.style.transform = `translateX(-${this.activeItem * 100}%)`;
    } else {
      this.activeItem = 0;
      this.slides.style.transform = 'none';
    }
    this.updateFooter();
  }

  updateFooter() {
    this.controlCarouselFooter.innerHTML = `${this.activeItem+1} / ${this.allItems}`;
  }
}

// 初始化轮播
new Carousel();

为什么你之前的尝试失败？ #

• 直接写addEventListener('click', prev(slides,...))会立即执行prev()，因为这是函数调用，不是传递函数引用。
• 把参数放到prev/next内部重新获取，会导致每次点击都重新查询DOM元素，而且activeItem会被重置为0，所以逻辑失效。

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