如何为简单jQuery滑块添加同页面多实例支持？

问题根源 #

你原来的代码存在以下问题导致无法支持多实例：

• 全部使用ID选择器查找元素，ID在页面中唯一，多滑块场景下会匹配到所有滑块内的对应元素，逻辑完全混乱
• 滑块索引、定时器均为全局变量，多个滑块会互相覆盖变量值
• 全局挂载的$.Slider方法是所有实例共享的，无法区分不同滑块的状态

前置HTML结构调整 #

你需要先把原来的ID命名改成类命名，每个滑块的结构统一如下：

<!-- 滑块1 -->
<div class="slider">
  <ul class="image">
    <li>滑块1图1</li>
    <li>滑块1图2</li>
    <li>滑块1图3</li>
  </ul>
  <ul class="indicator">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<!-- 滑块2 -->
<div class="slider">
  <ul class="image">
    <li>滑块2图1</li>
    <li>滑块2图2</li>
    <li>滑块2图3</li>
  </ul>
  <ul class="indicator">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

修改后的JS代码 #

$(function(){
  // 遍历页面所有滑块实例
  $('.slider').each(function() {
    // 所有元素查找都基于当前滑块容器，隔离不同滑块的作用域
    const $currentSlider = $(this);
    const $indicator = $currentSlider.find('.indicator li');
    const $imageList = $currentSlider.find('.image li');
    const total = $indicator.length;
    let currentIndex = 0;
    let timer = null;

    // 滑块切换函数，仅作用于当前滑块
    function slideSwitch() {
      $indicator.removeClass('active');
      $imageList.hide();
      if (currentIndex < total - 1) {
        currentIndex++;
      } else {
        currentIndex = 0;
      }
      $indicator.eq(currentIndex).addClass('active');
      $imageList.eq(currentIndex).fadeIn('slow');
    }

    // 自动播放初始化
    function autoPlay() {
      timer = setInterval(slideSwitch, 5000);
    }

    // 滑块初始化状态
    $indicator.removeClass('active').eq(0).addClass('active');
    $imageList.hide().eq(0).show();

    // 鼠标移入滑块暂停自动播放，移出恢复
    $currentSlider.hover(function() {
      clearInterval(timer);
    }, function() {
      autoPlay();
    });

    // 指示器 hover 切换对应幻灯片
    $indicator.hover(function() {
      currentIndex = $(this).index();
      $indicator.removeClass('active').eq(currentIndex).addClass('active');
      $imageList.hide().eq(currentIndex).fadeIn('slow');
    });

    // 启动当前滑块的自动播放
    autoPlay();
  });
});

核心改造点说明 #

• 用.slider类选择器匹配所有滑块，通过each遍历为每个滑块单独初始化独立的作用域
• 所有元素查找都使用find方法基于当前滑块容器，匹配范围限定在当前滑块内部
• 每个滑块的索引、定时器currentIndex、timer都是each回调内的局部变量，不同滑块之间不会互相干扰
• 移除了全局挂载的$.Slider方法，每个滑块的切换方法都是内部独立的函数

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