点击按钮遍历列表修改图片src失败，求解决方法

需求与问题现象 #

用户需求：点击按钮后，通过JavaScript遍历图片地址列表，为页面中的img元素依次修改src属性。

原JS代码：

images = ["https://lh3.googleusercontent.com/ogw/AAEL6sjw9dduiRogTxPK6DINwgbrrbDQvTYCZIF5L7BPjw=s32-c-mo", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTAdKB4YazVymOswPFKMfUjCcJSRhr6e1QxOEOeL6P-9pxChlQHs7H8foV8AKbIKEa3jc&usqp=CAU", "https://lh3.googleusercontent.com/9Dx0SmLSLdctuysuyEB2zRvcGAv6vda9EyaAGEt4T2paouQr763BQcKPTf86Jdj-8BXqXxNUGqBKJBIn=w544-h544-s-l90-rj"];
function my_function(){
   for(x in images){
      document.getElementById("image").src = x;
   }
}

原HTML代码：

<html>
    <body>
    <button onclick="my_function()">clkdfafd</button>
    <img id="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQm1NxjkLYfAFElYwTFN848roKIhwWhBgJT0w&usqp=CAU">
    </body>
</html>

问题现象：点击按钮后，页面始终显示图片加载失败的占位图。

问题原因 #

1. 遍历方式错误：使用for...in遍历数组时，变量x获取的是数组的索引字符串（如"0"、"1"、"2"），而非数组中存储的图片URL。把索引赋值给img的src属性，浏览器无法找到对应资源，必然显示加载失败。
2. 循环执行过快：即使拿到正确的URL，当前循环会瞬间执行完毕，最终src只会被设置为数组最后一个索引的值，用户看不到中间的切换过程。

解决办法 #

方案1：点击按钮依次切换图片（循环切换） #

维护一个当前图片索引，每次点击按钮时更新索引并设置对应图片URL，实现循环切换效果：

修改后的JS代码：

// 图片地址列表
const images = ["https://lh3.googleusercontent.com/ogw/AAEL6sjw9dduiRogTxPK6DINwgbrrbDQvTYCZIF5L7BPjw=s32-c-mo", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTAdKB4YazVymOswPFKMfUjCcJSRhr6e1QxOEOeL6P-9pxChlQHs7H8foV8AKbIKEa3jc&usqp=CAU", "https://lh3.googleusercontent.com/9Dx0SmLSLdctuysuyEB2zRvcGAv6vda9EyaAGEt4T2paouQr763BQcKPTf86Jdj-8BXqXxNUGqBKJBIn=w544-h544-s-l90-rj"];
// 当前显示的图片索引
let currentIndex = 0;

function my_function() {
  const imgElement = document.getElementById("image");
  // 设置当前索引对应的图片URL
  imgElement.src = images[currentIndex];
  // 更新索引，循环切换
  currentIndex = (currentIndex + 1) % images.length;
}

优化后的HTML代码（按钮文本更清晰）：

<html>
    <body>
    <button onclick="my_function()">切换图片</button>
    <img id="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQm1NxjkLYfAFElYwTFN848roKIhwWhBgJT0w&usqp=CAU">
    </body>
</html>

方案2：自动遍历所有图片（定时切换） #

如果需要自动遍历所有图片并每张显示一段时间，可以使用定时器实现：

修改后的JS代码：

const images = ["https://lh3.googleusercontent.com/ogw/AAEL6sjw9dduiRogTxPK6DINwgbrrbDQvTYCZIF5L7BPjw=s32-c-mo", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTAdKB4YazVymOswPFKMfUjCcJSRhr6e1QxOEOeL6P-9pxChlQHs7H8foV8AKbIKEa3jc&usqp=CAU", "https://lh3.googleusercontent.com/9Dx0SmLSLdctuysuyEB2zRvcGAv6vda9EyaAGEt4T2paouQr763BQcKPTf86Jdj-8BXqXxNUGqBKJBIn=w544-h544-s-l90-rj"];
let index = 0;

function my_function() {
  const imgElement = document.getElementById("image");
  // 每隔2秒切换一张图片
  const timer = setInterval(() => {
    if (index >= images.length) {
      // 遍历完成后清除定时器
      clearInterval(timer);
      return;
    }
    imgElement.src = images[index];
    index++;
  }, 2000);
}

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