Question

我正在尝试使用javascript旋转图像，我正在尝试在adobes网站上找到的一些代码，这些代码可以完成我想要的工作。当我运行它时它给我错误：Uncaught TypeError：无法设置属性'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，但不会旋转它。我有没有看到明显的东西？不会让我感到惊讶！

感谢任何可以提供建议的人。

Answer 1

在head（查看控制台）时：

http://jsfiddle.net/m2wce/

这是因为您正在声明关闭并立即执行。当您在head中执行时， DOM尚未就绪（换句话说，浏览器尚未“挂载”下面的HTML，因为它按顺序处理页面，从顶部到botto）并且在执行时img标记尚不存在（因为它在HTML页面中位于下方）。

在body之后，在引用的img之后，它可以正常运行：

http://jsfiddle.net/m2wce/1/

Answer 2

您需要在dom准备好后放置此代码。即在$(document).ready()内或window.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不会被完全加载。

Answer 3

您的脚本在页面正文之前加载，因此找不到rotator元素。移除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);
})();

Answer 4

我也遇到了这个问题。你可以在使用该功能之前制作document.getElementById(rotatedImageId)。换句话说，你可以定义旋转器到gobal。这就是我解决这个问题的方法。

无法将属性'src'设置为null

4 个答案: