如何在JavaScript中用变量控制图片显示源并解决页面跳转问题

问题描述 #

刚接触JavaScript，不清楚如何根据变化的变量（希望使用相对文件路径）实现图片切换。看过教程，但图片会替换整个标签页而非作为页面的一部分显示。以下是目前的代码：

<div class="Box">
  //Irrelevant sibling div
  <img name="slide" class="slide" />
</div>

<script>
  var i = 0;
  var images = [];
  var time = 3000;

//Below is where I think the problem is

  images[0] = window.location = "./Images/img1.jpg";
  images[1] = window.location = "./Images/img2.jpg";
  images[2] = window.location = "./Images/img3.jpg";
  images[3] = window.location = "./Images/img4.jpg";
  images[4] = window.location = "./Images/img5.jpg";

//Above is where I think the problem is

  function changeImg() {
    document.slide.src = images[i];

    if (i < images.length - 1) {
      i++;
    } else {
      i = 0;
    }

    setTimeout(changeImg, time);
  }

  window.onload = changeImg;
</script>

尝试过使用window.location.href，结果与当前情况一致。

问题原因 #

你在给images数组赋值时错误使用了window.location = "路径"，这行代码的作用是直接跳转到指定路径，所以页面会被图片文件替换。你只需要把图片的相对路径直接存入数组即可，不需要加window.location。

修正后的代码 #

<div class="Box">
  <!-- Irrelevant sibling div -->
  <img name="slide" class="slide" />
</div>

<script>
  var i = 0;
  var images = [];
  var time = 3000;

  // 直接存储图片相对路径，不要用window.location
  images[0] = "./Images/img1.jpg";
  images[1] = "./Images/img2.jpg";
  images[2] = "./Images/img3.jpg";
  images[3] = "./Images/img4.jpg";
  images[4] = "./Images/img5.jpg";

  function changeImg() {
    // 更规范的获取图片元素方式（也可以保留document.slide）
    const slideImg = document.querySelector('img[name="slide"]');
    slideImg.src = images[i];

    i = (i < images.length - 1) ? i + 1 : 0;

    setTimeout(changeImg, time);
  }

  window.onload = changeImg;
</script>

关键说明 #

1. 数组赋值修正：去掉window.location，直接将图片相对路径存入数组，这样数组里存储的是图片地址字符串，而非触发页面跳转的命令。
2. 元素获取优化：用document.querySelector('img[name="slide"]')获取图片元素比document.slide更符合现代JS规范，可读性和兼容性更好。
3. 索引简化：用三元运算符简化了索引切换的逻辑，效果和之前的if-else一致，但代码更简洁。

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