2

我目前正在制作一个带有 div 标签内的图像的网页。我写了一个脚本在一定时间后更改图像，但是当我单独测试脚本时它工作正常；当我尝试将脚本放置在我的网页中时，它不会更改图像。

这是我的脚本的代码：

<!DOCTYPE html>
<html>
    <body>
        <script>
            images = new Array;
            images[0] = "img2.gif";
            images[1] = "img3.gif";
            images[2] = "img4.gif";
            images[3] = "img5.gif";
            images[4] = "img6.gif";
            images[5] = "img7.gif";
            images[6] = "img8.gif";
            images[7] = "img9.gif";
            images[8] = "img10.gif";

            setInterval( function() {
                changeImage()
            }, 5000);

            x = 0;

            function changeImage() {
                document.getElementById('ad').src = images[x];

                if ( x < 8 ) {
                    x += 1;
                } else if ( x = 9 ) {
                    x = 0;
                }
            }
        </script>

        <img id='ad' src="img.gif">
    </body>
</html>

我已经用 div 标签内的图像测试了这个脚本，它仍然可以正常工作。当我将相同的代码放入我的网页时，它不起作用。另请注意，图像文件名只是示例。我使用的图像来自 photobucket，所以我几乎无法控制它们的名称。我能得到的任何帮助将不胜感激。

4

3 回答 3

2

你需要把你的代码里面window.onload = function() {}

var images = new Array();
images[0] = "img2.gif";
images[1] = "img3.gif";
images[2] = "img4.gif";
images[3] = "img5.gif";
images[4] = "img6.gif";
images[5] = "img7.gif";
images[6] = "img8.gif";
images[7] = "img9.gif";
images[8] = "img10.gif";

function changeImage() {
  document.getElementById('ad').src = images[x];
  if (x<8) {
    x+=1;
  }

  else if (x===9) {
    x=0;
  }
}

window.onload = function() {
  var x = 0;
  setInterval(function() {
    changeImage()
  },5000);
}

编辑

这段代码已经在我的本地机器上测试过并且可以工作。

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      var images = new Array();
      for (var i = 2; i < 11; i++) {
        images.push("img" + i + ".gif");
      }
      var x = 0;

      function changeImage() {
        document.getElementById('ad').src = images[x];
        document.getElementById('imgsrc').innerHTML = "<h1>" + images[x] + "</h1>";
        if (x < 8) {
          x += 1;
        } else {
          x = 0;
        }
      }
      window.onload = function() {
        setInterval(function () {
          changeImage();
        }, 1000);
      }
    </script>
  </head>
  <body>
    <img id="ad" src="img.gif" />
    <div id="imgsrc"><h1>img.gif</h1></div>
  </body>
</html>

这是最终代码工作的小提琴。JSFiddle 出于某种原因不喜欢window.onload，所以我不得不排除它。这并不能真正证明我的观点，但我想我还是把它包括在内。

于 2013-07-03T20:18:17.003 回答
0

Your code works to change the image src in this fiddle: http://jsfiddle.net/snB2a/1/

于 2013-07-03T20:29:57.113 回答
0

尝试将变量 images 和 x 重命名为更长的名称。可能发生的情况是，如果您页面中的某些其他代码，或者更糟糕的是，您页面引用的脚本文件之一中的某些代码使用变量“x”而不在本地声明它，那么它实际上会修改您的“x”变量。

这是一个演示问题的示例：

function something()
{
  for (x = 0; i < 10; x++)
    dosomethingelse();
}

如果在您的页面中调用了上述函数，那么它将覆盖您的“x”变量。以下代码是安全的：

function something()
{
  var x;
  for (x = 0; i < 10; x++)
    dosomethingelse();
}
于 2013-07-03T20:37:24.907 回答