修改

Question

我目前正在制作一个带有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，所以我几乎无法控制它们的名称。我能得到的任何帮助都将不胜感激。

Answer 1

您需要将代码放在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>

Here是最终代码工作的小提琴。由于某种原因，JSFiddle不喜欢window.onload，所以我不得不排除它。这并没有真正证明我的观点，但我认为我还是要包括它。

Answer 2

您的代码可以更改此小提琴中的图片src：http://jsfiddle.net/snB2a/1/

Answer 3

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

以下是演示此问题的示例：

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

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

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

Javascript在一段时间后更改div中的图像

3 个答案:

修改