实现多个.wrapper内图片独立点击轮询的jQuery方案求助

嘿，完全懂你的需求！不用给每个wrapper单独命名复制代码，咱们用jQuery的相对选择器和独立状态存储就能让所有wrapper各自独立工作，代码简洁还容易维护，非程序员也能轻松上手～

第一步：先搞定基础样式（CSS） #

首先给容器和图片加个基础布局，让图片能堆叠起来，同时网格布局让你的图片排列整齐：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

.wrapper {
  position: relative;
  aspect-ratio: 1/1; /* 保持正方形，可根据需求调整 */
  overflow: hidden;
  cursor: pointer; /* 默认显示点击手型 */
}

/* 单图的容器去掉点击手型，区分可交互状态 */
.wrapper:has(.content:only-child) {
  cursor: default;
}

.wrapper .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片自适应容器，避免变形 */
}

第二步：核心jQuery代码（实现独立轮播） #

这段代码会自动遍历所有.wrapper，给每个容器维护独立的轮播状态，点击时只切换当前容器内的图片：

$(document).ready(function() {
  // 初始化：每个容器只显示第一张图，隐藏其他
  $('.wrapper').each(function() {
    const $wrapper = $(this);
    // 隐藏除了第一个之外的所有图片容器
    $wrapper.find('.content:not(:first)').hide();
    // 给当前容器存储当前显示的图片索引（初始为0）
    $wrapper.data('currentImgIndex', 0);
  });

  // 给所有容器绑定点击事件
  $('.wrapper').on('click', function() {
    const $currentWrapper = $(this);
    const $allContents = $currentWrapper.find('.content');
    const totalImgs = $allContents.length;

    // 如果是单图容器，点击不做任何操作
    if (totalImgs <= 1) return;

    // 获取当前容器的图片索引
    let currentIndex = $currentWrapper.data('currentImgIndex');
    // 隐藏当前显示的图片
    $allContents.eq(currentIndex).hide();
    // 计算下一张图片的索引（循环轮播）
    currentIndex = (currentIndex + 1) % totalImgs;
    // 显示下一张图片
    $allContents.eq(currentIndex).show();
    // 更新当前容器的索引状态
    $currentWrapper.data('currentImgIndex', currentIndex);
  });
});

代码说明（小白友好版） #

• .each()遍历：页面加载时，逐个处理每个.wrapper，确保每个容器的初始化都是独立的，不会互相影响。
• data()存储状态：用data()给每个容器单独存当前显示的图片索引，相当于每个容器有自己的“小账本”，记录自己轮播到哪一步了。
• 相对选择器$(this)：点击时只操作当前被点击的.wrapper内部的图片，完全不会碰其他容器的内容。
• 循环轮播逻辑：用(currentIndex + 1) % totalImgs实现点击到最后一张后自动回到第一张，不用额外判断边界。

这样不管你加多少个.wrapper，每个里面放1-4张图，它们都会各自独立工作，不用修改代码，直接复用就行～

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