Question

我尝试过很多次运行此代码。图像甚至没有加载。我有充分的理由吗？ html文件和图像保存在同一目录中，有两个图像。

<script language="JavaScript">
delay = 200;
image_seq = new Array();
for (i = 1; i < 3; i++) {
    image_seq[i] = new image();
    image_seq[i].src = i + ".jpeg"
}
num = 1;

function animate() {
    document.pic_rotate.src = image_seq[num].src;
    num++;
    if (num > 2)
        num = 1;
}

function slow() {
    delay = delay + 25;
    if (delay > 2000)
        delay = 2000;
}

function fast() {
    delay = delay - 25;
    if (delay < 0)
        delay = 0;
}
</script>
<img name="pic_rotate" src="1.jpeg" onLoad="setTimeout('animate()',delay)">
<form>
<input type="button" value="Slow" onClick="slow()">
<input type="button" value="Fast" onClick="fast()">
</form>

Answer 1

该代码存在批次问题，但您没有看到图片的主要原因是此行使用image，其中应使用Image：< / p>

image_seq[i] = new Image();
//                 ^---- Note that this is `I`, not `i` -- capitalization matters

代码的其他问题包括：

由于未能声明您的变量，您在整个地方都成了The Horror of Implicit Globals的牺牲品。
您依赖浏览器将标识符pic_rotate转储到document，因为您已为该元素指定了name属性。这不一定是可靠的。相反，请使用id并使用document.getElementById显式查找元素。
您第一次拨打animate只会将相同的图片分配给它已经拥有的pic_rotate，因此在第一张图片到达之前，您似乎会有异常长的延迟。< / p>
使用计数器和数组的代码似乎不必太复杂，只是在两个图像之间翻转（1.jpeg和2.jpeg）。
new Array()，但不以任何方式错误，最好简单地写成[]。
如果您只打算使用他们的src属性，那么没有理由创建图像元素（例如，您正在做的事情是预取它们，因为您从未添加图像“创建DOM”。
使用旧的DOM0 onXyz属性同样不是错误的，但通常不是最佳做法。
将字符串传递到setTimeout是不好的做法。
这是无害的，但如果你没有提交表格，就没有理由把按钮放在表格中。

这是一个处理上述问题的完整示例：Live Copy我坚持理论上的循环，你可能有两个以上你打算使用的图像......

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Testing</title>
</head>
<body>
<div id="imageContainer">
</div>
<input id="buttonSlow" type="button" value="Slow">
<input id="buttonFast" type="button" value="Fast">
<script>
  // A scoping function to avoid using any globals
  (function() {
    "use strict"; // Improve JavaScript using its new "strict" mode

    // Declare our variables
    var images, index, delay;

    // Our main initialization function
    function init() {
      // Get the image container
      var imageContainer = document.getElementById("imageContainer");

      // Create an array of images
      images = [
        createImage("https://www.gravatar.com/avatar/1d5ac1c9d660351786dc6b3873627c4d?s=128&d=identicon&r=PG&f=1"),
        createImage("https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=128&d=identicon&r=PG")
      ];

      // Add our images to the container, with only the first one being visible
      for (index = 0; index < images.length; ++index) {
        if (index > 0) {
          images[index].style.display = "none"; // Even though hidden, will get fetched
        }
        imageContainer.appendChild(images[index]);
      }

      // Set our index to the currently-showing image, and our standard delay
      index = 0;
      delay = 500; // 500ms = half a second

      // Hook up our buttons (look into addEventListener [attachEvent on
      // older IE], but onclick works for this example)
      document.getElementById("buttonSlow").onclick = function() {
        delay = Math.min(delay + 25, 2000); // Don't go past 2000
      };
      document.getElementById("buttonFast").onclick = function() {
        delay = Math.max(delay - 25, 0); // Don't go below 0
      };

      // Start our animation
      setTimeout(animate, delay);
    }

    // A function to create images
    function createImage(src) {
      var img = document.createElement('img');
      img.src = src;
      return img;
    }

    // Our animation function
    function animate() {
      images[index].style.display = "none"; // Hides it
      index = (index + 1) % images.length;  // A fancy way to add one and wrap back to 0 if needed
      images[index].style.display = "";     // Shows it

      // Hook up the next animation with our current delay
      setTimeout(animate, delay);
    }

    // Start!
    init();

  })();
</script>
</body>
</html>

显示图像JavaScript

1 个答案: