Javascript 无法设置属性'；src&x27；空的

我正在尝试使用javascript旋转图像，我正在尝试在adobes网站上找到的一些代码，这些代码正是我想要的。当我运行它时，它会给我一个错误：uncaughttypeerror:无法将属性'src'设置为null

它每5秒重复一次，即每幅图像之间的时间间隔

下面是javascript：

 (function () {
        var rotator = document.getElementById('rotator');  // change to match image ID
        var imageDir = 'images/';                          // change to match images folder
        var delayInSeconds = 5;                            // set number of seconds delay
        // list image names
        var images = ['image2.jpg', 'image3.jpg', 'image4.jpg', 'image1.jpg'];

        // don't change below this line
        var num = 0;
        var changeImage = function () {
            var len = images.length;
            rotator.src = imageDir + images[num++];
            if (num == len) {
                num = 0;
            }
        };
        setInterval(changeImage, delayInSeconds * 1000);
    })();

下面是图像的html：

<img src="images/image1.jpg" alt="rotating image" width="400" height="300" id="rotator" />

它显示image1.jpg，但不旋转它。有什么明显的东西是我看不到的吗？不会让我吃惊的

---

感谢所有能提供建议的人。

在

标题中时（查看控制台）：


这是因为您正在声明闭包并立即执行。当您在
头部执行它时，DOM还没有准备好（换句话说，浏览器还没有“挂载”下面的HTML，因为它从上到下依次处理页面），执行时
img
标记还不存在（因为它在HTML页面的下方）

在
主体
中，在引用的
img
之后，它工作：

您的脚本在页面正文之前加载，因此找不到
旋转器
元素。删除
var rotator=…
行，将其放入
changeImage
函数中：

(function () {
    var rotator;
    var rotatedImageId = 'rotator';           // change to match your HTML
    var imageDir = 'images/';
    var delayInSeconds = 5;
    // list image names
    var images = ['image2.jpg', 'image3.jpg', 'image4.jpg', 'image1.jpg'];

    // don't change below this line
    var num = 0;
    var changeImage = function () {
        if (!rotator)
            rotator = document.getElementById(rotatedImageId);
        if (!rotator)
            return;

        var len = images.length;
        rotator.src = imageDir + images[num++];
        if (num == len) {
            num = 0;
        }
    };
    setInterval(changeImage, delayInSeconds * 1000);
})();

您需要在dom就绪后放置此代码。i、 e在
$（document）.ready（）内或在
窗口上。onload
。作为：

window.onload=function(){
(function () {
    var rotator = document.getElementById('rotator');  // change to match image ID
    var imageDir = 'images/';                          // change to match images folder
    var delayInSeconds = 5;                            // set number of seconds delay
    // list image names
    var images = ['image2.jpg', 'image3.jpg', 'image4.jpg', 'image1.jpg'];

    // don't change below this line
    var num = 0;
    var changeImage = function () {
        var len = images.length;
        rotator.src = imageDir + images[num++];
        if (num == len) {
            num = 0;
        }
    };
    setInterval(changeImage, delayInSeconds * 1000);
})();

如果您将该代码放在head中的任意函数中（就像您所做的那样），那么它将无法从Dom中加载该图像元素，因为Dom在当时不会完全加载。
我也遇到了这个问题。您可以在使用该函数之前制作
document.getElementById（rotateImageId）
。换言之，您可以定义旋转器到gobal。
这就是我解决这个问题的方法。
脚本在哪里？如果它位于
头部
中，则可能会遇到此问题。请尝试在changeImage中的私有函数中传递rotator。它位于标记的头部。在尝试访问元素之前，需要等待DOM准备就绪。因此，由于您的代码在头部，并且立即执行，它尝试查找
#rotator
元素（在主体中），该元素甚至还没有被呈现，因此
document.getElementById（“rotator”）
的结果是
null
，因此，您当然不能设置
src
属性
null
它试图查找id为
rotator
的元素，但它还不存在。将其包装在文档就绪事件中，或在渲染后运行。如果要这样做，最好使用
var rotator。。。。if（！rotator）{rotator=document.getElementById（'rotator'）；if（！rotator）{return；}}
键入内容。@AD7six很好的建议，谢谢。我已经在我的答案中添加了这一部分。这里可能更清楚，请看控制台：（1）在头部编码-在img之前-不起作用：和（2）在img之后编码-起作用：。你的答案使我免于3天的痛苦。在这个回答中提到“DOM必须准备好”是非常重要的。这是我甚至没有意识到的事情。挣扎了3天。谢谢你的回答。