3

我正在尝试使用 javascript 旋转图像，并且正在尝试在 adobes 网站上找到的一些代码，这些代码可以满足我的需求。当我运行它时，它给了我错误： Uncaught TypeError: Cannot set property 'src' of 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，但不旋转它。有什么我没有看到的明显的东西吗？不会让我吃惊！

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

4

4 回答 4

7

在head（查看控制台）中时：

http://jsfiddle.net/m2wce/

发生这种情况是因为您正在声明关闭并立即执行。当你在 中执行它时head，DOM 还没有准备好（换句话说，下面的 HTML 仍然没有被浏览器“安装”，因为它按顺序处理页面，从上到下）并且在执行该img标记尚不存在（因为它位于 HTML 页面的下方）。

在 中body，在引用后img，它起作用：

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

于 2013-06-21T14:01:57.830 回答
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 内的 anynomous 函数中（就像您所做的那样），那么它将无法从 Dom 加载该图像元素，因为当时 Dom 不会完全加载。

于 2013-06-21T14:15:01.633 回答
1

您的脚本在页面正文之前加载，因此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);
})();
于 2013-06-21T14:02:41.230 回答
-1

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

于 2016-10-11T03:59:23.920 回答