Question

为什么这段代码无法运作？我试图每4秒更换一次图像...... 我真的不明白，一切都应该正常工作。

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
function Falcon0408()
{
document.getElementByTagName('img');


if (document.getElementByTagName('img').src='img1.png')
{
document.getElementByTagName('img').src='img2.png';
}




else if (document.getElementByTagName('img').src='img2.png')
{
document.getElementByTagName('img').src='img3.png';

}

else if (document.getElementByTagName('img').src='img3')
{
document.getElementByTagName('img').src='img1.png';
}
}
</script>

</head>
<body>
<script>
setTimeout(Falcon0408(),400);
</script>
<img src='img.png'/>


</body>
</html>

Answer 1

它是getElementsByTagName - “元素”是复数，因为你得到了带有该标签的所有元素。
您使用的是分配运算符=，而不是比较==或===。
HTML中的实际图片源只是“img.png”，因此它永远不会与您的任何“if”语句匹配。
不是错误，而是提示：“不要重复自己。”获取图像的属性一次，并将其存储在变量中，然后检查该变量。
为您的图片代码添加一个唯一ID，以便您可以使用getElementById直接定位它（请注意它的“Id”而不是“ID”）。如果您在网页上有多个img代码，该怎么办？你可能不希望所有这些都改变。

代码：

<img id="myImg" src="img1.png"/>

function Falcon0408()
{
    var image = document.getElementById('myImg');

    if (image.src === 'img1.png')
   {
       image.src = 'img2.png';
   }

   else if (image.src === 'img2.png')
   {
       image.src='img3.png';
   }

   else if (image.src === 'img3')
   {
      image.src='img1.png';
   }
}

当您想要循环显示20或1000张图像时，您会怎么做？你会继续添加if / else块吗？

更好的方法是拥有一组图像（或者只知道文件夹中有多少张照片）并使用循环根据数组中的图像数量更改源。这样你每次想要添加新图像时都不必继续添加else / if语句......但这超出了这个问题的范围。

如果您希望循环播放，则无效。请参阅this answer了解如何使用setInterval()，或者如何在函数内包含对setTimeout（）的另一个调用，以便它继续运行。

Javascript代码错误我不知道为什么

1 个答案: