使用jQuery实现多组图片同步按序循环切换功能

实现方案 #

调整后的CSS代码 #

新增定位规则和默认隐藏逻辑，保证同组图片切换时位置统一，不会出现偏移：

.images {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 12px;
}
.images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

重写后的JS代码 #

用统一的全局索引控制所有图片组的切换进度，保证所有行完全同步，自动适配新增的.images容器，无需修改代码：

jQuery(function($) {
  // 全局统一记录当前要显示的图片索引，初始为0对应第一张
  let currentShowIndex = 0;
  // 初始化：所有图片组默认显示第一张
  $(".images").each(function() {
    $(this).children("img").eq(currentShowIndex).fadeIn().addClass("active");
  });
  // 定时切换，间隔3000可根据需求自行调整
  setInterval(function() {
    // 动态获取每组图片总数，自动适配不同数量的分组
    const totalImgCount = $(".images").first().children("img").length;
    // 索引自增，超过总数自动归零实现循环
    currentShowIndex = (currentShowIndex + 1) % totalImgCount;
    // 所有图片组同步切换到对应索引的图片
    $(".images").each(function() {
      $(this).find(".active").fadeOut().removeClass("active");
      $(this).children("img").eq(currentShowIndex).fadeIn().addClass("active");
    });
  }, 3000);
});

用法说明 #

原有HTML结构无需修改，后续新增相同结构的图片行时，直接添加带.images类的容器、内部放入对应数量的img标签即可，无需调整JS代码即可自动适配同步切换逻辑。

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