新手开发者求助：实现图文切换轮播组件的问题

嗨，我完全懂你现在的处境——作为大学新手开发者，想做个点击箭头就能切换图文内容的轮播，结果AI给的代码没达到预期，肯定有点头疼对吧？别着急，我们先拆解下现有代码的问题，再一步步改成你想要的效果～

先说说你现有代码里的几个小问题：

1. 你的#additionalContainers一开始就加了hidden类，就算里面的容器移除hidden，父元素被隐藏的话子元素也显示不出来哦
2. 现有JS是逐个显示容器（点一下出一个新的，直到全部显示后再重置），但你要的是替换——点击箭头后，当前的图文消失，直接换成下一组内容
3. 初始状态的容器显示逻辑没理清楚，导致第一次点击的行为不符合预期

接下来我们直接改出能实现你需求的代码，同时给你解释每一步的作用：

第一步：调整HTML结构 #

首先要把初始显示的容器和额外的容器放在同一个层级（统一管理所有要切换的容器），并且确保除了第一个容器，其他默认都加hidden类；另外去掉#additionalContainers的hidden类，因为我们要直接控制里面的容器显示隐藏：

<!-- 所有要切换的容器都放在同一个父容器里，方便统一获取 -->
<div id="carouselContainers">
  <!-- 第一个容器：初始显示 -->
  <div class="container">
    <div class="sectiontext">
      <h2>Voyager à Londres pendant les vacances de Noël</h2>
      <p>Ici, vous allez comprendre à quel point Londres est une destination parfaite pour des vacances à la période de Noël.</p>
      <p>La ville est magnifiquement décorée avec des lumières scintillantes et des marchés de Noël animés.</p>
      <p>Vous pouvez également profiter de la patinoire en plein air et des spectacles de Noël.</p>
      <p>Ne manquez pas de visiter les célèbres attractions touristiques comme le London Eye, le Tower Bridge et le Palais de Buckingham.</p>
      <p>Vous pouvez également faire du shopping dans les grands magasins de Londres et déguster des plats délicieux dans les restaurants de la ville.</p>
      <p>Alors, préparez-vous à vivre une expérience inoubliable à Londres pendant les vacances de Noël !</p>
    </div>
    <div class="sectionimage">
      <img src="images/londoneye.jpg" alt="Image du London Eye de nuit" />
    </div>
  </div>

  <!-- 第二个容器：初始隐藏 -->
  <div class="container hidden">
    <div class="sectiontext">
      <h2>Les marchés de Noël</h2>
      <p>Les marchés de Noël à Londres sont un incontournable. Vous y trouverez des cadeaux artisanaux, des décorations et des spécialités culinaires.</p>
    </div>
    <div class="sectionimage">
      <img src="images/marche_noel.jpg" alt="Marché de Noël à Londres" />
    </div>
  </div>

  <!-- 第三个容器：初始隐藏 -->
  <div class="container hidden">
    <div class="sectiontext">
      <h2>Les spectacles de Noël</h2>
      <p>Assistez à des spectacles de Noël dans les théâtres de Londres, avec des performances qui raviront toute la famille.</p>
    </div>
    <div class="sectionimage">
      <img src="images/spectacle_noel.jpg" alt="Spectacle de Noël à Londres" />
    </div>
  </div>
</div>

<!-- 切换箭头 -->
<div class="arrow" onclick="toggleContainers()">&#x2192; Voir plus</div>

第二步：修正CSS（不用改太多，主要确保hidden类生效） #

你的原有CSS大部分都能用，只需要确认hidden类的样式，还有确保容器的初始布局正常：

/* 容器基础样式（保留你原来的） */
.container {
  display: flex;
  justify-content: space-between;
  margin: 20px auto;
  width: 85%;
  max-width: 1200px;
  gap: 20px;
  background-color: #d2d4e7;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.container:hover {
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2);
}

.sectiontext,
.sectionimage {
  flex: 1;
  background-color: #edefff;
  padding: 20px;
  box-sizing: border-box;
  border: 2px solid #464e73;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}

.sectiontext:hover,
.sectionimage:hover {
  transform: scale(1.02);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  border-color: #6a82e8;
}

.sectionimage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* 隐藏类：确保完全不显示 */
.hidden {
  display: none !important;
}

/* 箭头样式（调整对齐，和容器宽度匹配） */
.arrow {
  cursor: pointer;
  font-size: 24px;
  margin: 10px auto;
  width: 85%;
  max-width: 1200px;
  text-align: right;
}

第三步：重写JS逻辑（实现真正的“切换”效果） #

这次我们的逻辑是：点击箭头时，先隐藏当前显示的容器，然后切换到下一个容器显示；如果已经到最后一个，就回到第一个，形成循环：

// 初始化当前显示的容器索引
let currentContainerIndex = 0;
// 获取所有要切换的容器
const containers = document.querySelectorAll("#carouselContainers .container");

function toggleContainers() {
  // 1. 先隐藏当前显示的容器
  containers[currentContainerIndex].classList.add("hidden");
  
  // 2. 计算下一个要显示的容器索引（循环切换：到最后一个后回到第一个）
  currentContainerIndex = (currentContainerIndex + 1) % containers.length;
  
  // 3. 显示下一个容器
  containers[currentContainerIndex].classList.remove("hidden");
}

关键逻辑解释 #

1. 循环切换实现：用(currentContainerIndex + 1) % containers.length是核心——当索引到达最后一个容器时，加1取模后会回到0（第一个容器），这样点击箭头就能一直循环切换啦
2. 替换式显示：每次点击都先隐藏当前的，再显示下一个，完美匹配你要的“点击箭头，当前图文消失，换成新一组”的需求
3. 结构优化：把所有要切换的容器放在同一个父容器下，避免了之前父元素隐藏导致子元素无法显示的问题，也更方便统一管理

这样改完之后，你点击箭头就能实现完美的图文切换效果啦！如果还有其他细节想调整（比如加过渡动画、改成左右双箭头之类的），随时说哦～

备注：内容来源于stack exchange，提问作者Samantha Pacheco-Pires Wiss