如何使用jQuery实现轮播循环切换功能？

问题描述 #

我已经实现了通过按钮切换选项的功能，现有jQuery代码如下：

$('.pie-btn-prev').on('click', function() { $('.is-current').removeClass('active is-current').prev().addClass('active is-current') }); 
$('.pie-btn-next').on('click', function() { $('.is-current').removeClass('active is-current').next().addClass('active is-current') }

对应的HTML结构为：

<div class="icon-box">
  <div class="pie-icon icon-1">
    <i class="fas fa-alien-monster"></i>
  </div>
  <div class="pie-icon icon-2">
    <i class="fas fa-alien-monster"></i>
  </div>
  <div class="pie-icon icon-3">
    <i class="fas fa-alien-monster"></i>
  </div>
  <div class="pie-icon icon-4">
    <i class="fas fa-alien-monster"></i>
  </div>
</div>
<div class="btn-box">
  <div class="pie-btn-prev">
    <i class="fal fa-long-arrow-left"></i>
  </div>
  <div class="pie-btn-next">
    <i class="fal fa-long-arrow-right"></i>
  </div>
</div>

但当前功能存在缺陷：当点击到最后一个选项的“下一个”按钮或第一个选项的“上一个”按钮时，无法继续进行切换操作。我希望实现循环切换效果，即点击最后一个选项的“下一个”按钮时自动回到第一个选项，点击第一个选项的“上一个”按钮时自动回到最后一个选项，请问该如何修改代码来实现这一需求？

解决方案 #

嘿，这个循环切换的需求很好实现，核心思路就是判断当前选中项是否处于边界位置，如果到了首尾，就切换到另一端的元素就行。我给你修改后的代码，顺便解释下逻辑：

修改后的jQuery代码

// 上一个按钮点击事件
$('.pie-btn-prev').on('click', function() {
  const currentItem = $('.is-current');
  // 精准获取当前项的前一个pie-icon元素
  const prevItem = currentItem.prev('.pie-icon');
  
  // 先移除当前项的激活类
  currentItem.removeClass('active is-current');
  
  // 如果没有找到前一个元素，说明当前是第一个，就切换到最后一个
  if (prevItem.length === 0) {
    $('.pie-icon').last().addClass('active is-current');
  } else {
    // 否则正常切换到前一个元素
    prevItem.addClass('active is-current');
  }
});

// 下一个按钮点击事件
$('.pie-btn-next').on('click', function() {
  const currentItem = $('.is-current');
  // 精准获取当前项的后一个pie-icon元素
  const nextItem = currentItem.next('.pie-icon');
  
  currentItem.removeClass('active is-current');
  
  // 如果没有找到后一个元素，说明当前是最后一个，就切换到第一个
  if (nextItem.length === 0) {
    $('.pie-icon').first().addClass('active is-current');
  } else {
    nextItem.addClass('active is-current');
  }
});

额外提示

别忘了在初始状态给其中一个pie-icon加上active is-current类，不然页面加载后没有默认选中项，按钮点击会失效哦。比如给第一个加上：

<div class="pie-icon icon-1 active is-current">
  <i class="fas fa-alien-monster"></i>
</div>

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