新手求助：如何修复这段JavaScript轮播滑块代码？

嘿，作为JS新手遇到这种问题太正常了，我帮你拆解下原代码里的坑，再给你一个能正常跑起来的版本：

原代码的核心问题 #

• 变量作用域错了：你在点击事件里每次都把i重置为0，根本没法追踪当前显示的图片索引，得把索引变量放在全局作用域里。
• 条件判断逻辑混乱：if (i = 0, true)这行是赋值操作加逗号运算符，永远会进入第一个分支，而且完全没处理索引的边界（比如到最后一张后要回到第一张）。
• 没做显示/隐藏操作：你只是获取了images[i]，但没修改图片的显示状态，点击按钮自然看不到变化。
• 漏了“précédent”按钮的逻辑：原代码只写了“suivant”按钮的点击事件，另一个按钮完全没绑定功能。
• 初始显示有问题：两个图片默认都显示，初始应该只让第一张露出来。

修复后的完整代码 #

HTML（调整初始显示类） #

<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<style>
  .présente { display: block; }
  .cachée { display: none; }
</style>
<div style="width: 60%; margin: auto;">
 <div id="exemple1" name="slide">
 <img id="image1" class="présente" name="slide" src="https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg" height="500" alt="" />
 <img id="image2" class="cachée" name="slide" src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" height="500" alt="" />
 </div>
</div>
<div id="bouton" style='display: flex; justify-content: center; margin-top: 10px;'>
 <button id="button1" style="margin-right: 15px;">suivant</button>
 <button id="button2">précédent</button>
</div>

JavaScript（修正逻辑和事件绑定） #

// 获取图片元素
const image1 = document.getElementById('image1');
const image2 = document.getElementById('image2');
const images = [image1, image2];
// 获取按钮元素
const suivantBtn = document.getElementById('button1');
const precedentBtn = document.getElementById('button2');

// 全局变量追踪当前显示的图片索引，初始为第一张
let currentIndex = 0;

// 切换图片的通用函数，统一处理显示/隐藏
function showImage(index) {
  // 先隐藏所有图片
  images.forEach(img => {
    img.classList.remove('présente');
    img.classList.add('cachée');
  });
  // 显示目标图片
  images[index].classList.remove('cachée');
  images[index].classList.add('présente');
}

// 下一张按钮点击逻辑
suivantBtn.onclick = function() {
  // 索引加1，超过最后一张就回到第一张（用取模实现循环）
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
};

// 上一张按钮点击逻辑
precedentBtn.onclick = function() {
  // 索引减1，小于0就回到最后一张（加length再取模避免负数）
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  showImage(currentIndex);
};

关键修改说明 #

• 新增了cachée类用来隐藏图片，初始只让第一张显示。
• 用currentIndex全局变量追踪当前图片位置，避免每次点击重置索引。
• 写了通用的showImage函数，减少重复代码，逻辑更清晰。
• 用取模运算符%处理循环切换，哪怕以后加更多图片，逻辑也不用改。
• 给“précédent”按钮补上了点击事件，实现上一张的功能。

这样你的轮播滑块就能正常切换图片啦～

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