NEXT与PREVIOUS按钮onClick事件失效问题求助

兄弟，我帮你瞅了瞅代码片段，发现几个关键问题导致点击Previous/Next按钮时图片没切换效果，咱们一步步来修复：

先梳理核心问题 #

• 按钮ID重复：你给两个按钮都设了id="prev"，DOM里ID必须唯一，Next按钮的ID得改成id="next"，不然后续可能出现元素获取混乱的问题。
• 只修改了计数器，没更新图片：你的previous()和next()函数只改了which变量，但没有把新的图片路径赋值给图片元素，自然看不到切换效果。
• 缺少全局变量与基础配置：which计数器需要在函数外声明成全局变量，不然每次调用函数都会重新初始化；另外还得提前定义好要轮播的图片路径数组photos。

修复后的完整代码 #

<!-- 图片容器：这里假设你有一个img标签，给它一个id方便操作 -->
<img id="carouselImg" src="" alt="轮播图片">

<!-- 修正按钮ID，确保唯一 -->
<input type="button" id="prev" value="Previous" onClick="previous()">
<input type="button" id="next" value="Next" onClick="next()">

<script type="text/javascript">
// 1. 定义轮播图片路径数组，替换成你自己的图片地址
const photos = [
  "image1.jpg",
  "image2.jpg",
  "image3.jpg"
];

// 2. 全局计数器，记录当前显示的图片索引
let which = 0;

// 3. 页面加载时先显示第一张图片
window.onload = function() {
  document.getElementById("carouselImg").src = photos[which];
};

// 4. 上一张函数：更新计数器+切换图片
function previous() {
  // 循环到最后一张
  if (which <= 0) {
    which = photos.length - 1;
  } else {
    which--;
  }
  // 关键：更新图片的src属性
  document.getElementById("carouselImg").src = photos[which];
}

// 5. 下一张函数：更新计数器+切换图片
function next() {
  // 循环到第一张
  if (which >= photos.length - 1) {
    which = 0;
  } else {
    which++;
  }
  // 关键：更新图片的src属性
  document.getElementById("carouselImg").src = photos[which];
}
</script>

关键修改说明 #

• 给图片元素加了id="carouselImg"，方便通过JS获取并修改它的src属性。
• 把Next按钮的ID改成了next，避免ID冲突。
• 新增了全局的photos数组和which计数器，确保轮播逻辑能正常追踪当前图片位置。
• 在每个切换函数最后，都加上了document.getElementById("carouselImg").src = photos[which];，这是让图片切换的核心步骤——把新的图片路径赋值给img元素。
• 加了window.onload事件，确保页面加载完成后显示第一张图片。

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