JS Image Slider图片无法显示：问题排查与解决咨询

问题根源 #

你的代码里有几个关键错误导致图片无法显示：

• 定时器调用的函数名拼写错误：setInterval(moveIt, 5)应为setInterval(moveIt1, 5)，导致滑入动画从未触发，容器一直停在屏幕外（margin-left: -800px）。
• 未声明的变量：c变量没有用let/var声明，属于全局变量，可能引发意外冲突。
• 冗余的全局变量：image0、image1、image2完全多余，不需要单独赋值。

修复后的完整代码 #

HTML

<body bgcolor="linen" onLoad="enterLt()">
  <div id="container"></div>
</body>

CSS

#container {
  position: absolute;
  width: 800px;
  margin-left: -800px;
  left: 0;
  overflow: hidden; /* 防止图片溢出容器 */
}

#container img {
  display: block; /* 去除图片默认的行内间距 */
}

JavaScript

var filenames = ['image1.png', 'image2.png', 'image3.png'];
var i = 0;

function enterLt() {
  var origWidth = 800;
  var container = document.getElementById("container");
  
  // 重置容器初始位置
  container.style.width = origWidth + 'px';
  container.style.left = '0';
  container.style.marginLeft = '-800px';
  
  // 更新当前图片
  container.innerHTML = '<img src="' + filenames[i] + '" id="image1">';
  var currentImg = document.getElementById("image1");
  currentImg.style.width = origWidth + 'px';
  
  // 更新图片索引，实现循环
  i = (i < filenames.length - 1) ? i + 1 : 0;

  var x2a = 0;
  var s1 = setInterval(moveIt1, 5);

  function moveIt1() {
    x2a++;
    if (x2a >= origWidth) {
      clearInterval(s1);
      exitRT();
      return;
    }
    let c = (0 - origWidth) + x2a;
    container.style.marginLeft = c + 'px';
  }

  function exitRT() {
    var x1 = origWidth;
    var x2b = 0;
    var s2 = setInterval(moveIt2, 5);

    function moveIt2() {
      x1--;
      x2b++;
      if (x1 < 0) {
        clearInterval(s2);
        enterLt();
        return;
      }
      container.style.width = x1 + 'px';
      container.style.left = x2b + 'px';
    }
  }
}

额外优化说明 #

• 给容器添加overflow: hidden，避免图片溢出容器影响布局。
• 给图片添加display: block，消除图片默认的底部间距。
• 使用(i < filenames.length - 1) ? i + 1 : 0替代硬编码的判断，方便后续增减图片数量。
• 缓存container和currentImg元素，避免重复调用getElementById提升性能。

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