如何使用jQuery实现无序列表每2项为一组循环淡入淡出效果

问题原因 #

你的原有逻辑存在3个问题：

• 定时器回调中直接遍历所有分组同时执行显示操作，没有按顺序切换分组
• 没有记录当前展示的分组索引，也没有隐藏上一组的逻辑，运行后所有li元素最终都会被显示
• 没有处理淡入淡出的动画时序，会出现两组元素同时显示的闪烁问题

修正后的完整代码 #

HTML 结构（和你原有结构一致）

<div>
  <ul>
   <li>item1</li> <!-- 默认首次显示 -->
   <li>item2</li> <!-- 默认首次显示 -->
   <li>item3</li> <!-- 第二组显示 -->
   <li>item4</li> <!-- 第二组显示 -->
   <li>item5</li> <!-- 第三组显示 -->
  </ul>
</div>

JavaScript 代码

function slide(elements) {
  const perChunk = 2;
  const inputArray = Array.from(elements[0].children);
  // 按每2个元素拆分分组，保留你原有正确逻辑
  const groupList = inputArray.reduce((resultArray, item, index) => { 
    const chunkIndex = Math.floor(index/perChunk);
    if(!resultArray[chunkIndex]) {
      resultArray[chunkIndex] = [];
    }
    resultArray[chunkIndex].push(item);
    return resultArray;
  }, []);

  // 先隐藏所有li，默认显示第一组
  $(inputArray).hide();
  $(groupList[0]).show();
  // 记录当前显示的分组索引
  let currentIndex = 0;

  setInterval(function() {
    // 先把当前组淡出
    $(groupList[currentIndex]).fadeOut(function() {
      // 计算下一组索引，超出总数回到第0组实现循环
      currentIndex = (currentIndex + 1) % groupList.length;
      // 新组淡入
      $(groupList[currentIndex]).fadeIn();
    });
  }, 2000); // 切换间隔可自行调整，此处数值代表每组显示2秒后切换
}

// 调用方式示例
slide($('ul'));

逻辑说明 #

• 支持最后一组不足2个元素的场景，比如你示例中的第三组只有1个item5也可以正常显示
• 动画时序做了链式处理，等上一组完全淡出后再显示下一组，不会出现重叠
• 下标取模运算实现了无限循环切换的需求

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