图片轮播组件循环异常求助：每1秒切换但停留在首张

我来帮你搞定这个轮播的循环逻辑问题！你的代码里的判断逻辑有两处关键问题，导致图片到第三张后就一直停在首张不动了：

1. 当counter >= 2时，你只是切换回第一张图，但没有重置counter的值，所以后续每次定时器触发时，counter依然是2，会一直进入这个分支，停在首张图。
2. else if (images[0])这个条件永远为真（因为images[0]存在且有效），这不是正确的分支判断逻辑，完全没必要这么写。

正确的实现思路 #

轮播的核心是让计数器在数组索引范围内循环：当计数器超过最后一张图的索引（也就是数组长度-1）时，重置为0，这样就能无限循环下去。我们可以用取模运算来简化这个逻辑，或者直接判断计数器是否到达数组长度来重置。

修正后的完整代码 #

HTML部分

<head>
  <meta charset="utf-8">
  <title>Intitulé de ma page</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="style.css">
  <style>
  </style>
</head>
<body>
  <div style="width: 60%; margin: auto;">
    <div id="exemple1" name="slide" style="display: flex;">
      <!-- image container -->
      <img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
    </div>
  </div>
  <script src="script.js"></script>
</body>

JavaScript部分（script.js）

const images = [ 
  "https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg", 
  "https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg", 
  "https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg", 
];
let counter = 0; // 用let更符合现代JS规范

setInterval(function() {
  // 每次递增计数器，然后对数组长度取模，保证索引永远在0到2之间
  counter = (counter + 1) % images.length;
  document.getElementById("currentImage").src = images[counter];
}, 1000);

逻辑解释 #

• (counter + 1) % images.length：每次计数器加1后，除以数组长度取余数。比如数组长度是3：
  • 当counter=2时，(2+1)%3=0，回到第一张图的索引
  • 当counter=0时，(0+1)%3=1，切换到第二张，以此类推
• 这样就不需要复杂的if/else判断，逻辑简洁且不会出错。

如果你更习惯用if判断的方式，也可以写成这样：

setInterval(function() {
  counter++;
  if (counter >= images.length) {
    counter = 0;
  }
  document.getElementById("currentImage").src = images[counter];
}, 1000);

两种方式都能完美实现1秒切换一次的循环轮播效果～

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