无法设置null的属性'src'

我正在尝试使用javascript旋转图像，并且我正在尝试在adobes网站上找到的一些代码，该代码可以完成我正在寻找的任务。当我运行它，它给我的错误：遗漏的类型错误：无法设置属性“SRC”空无法设置null的属性'src'

它不断重复，每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，但不旋转。有没有明显的我没有看到的东西？不会让我感到惊讶！

感谢任何能提供建议的人。

来源

2013-06-21 Joe W

剧本在哪里？如果它在'头部'，你可能会遇到这种情况。 – acdcjunior

尝试在changeImage的私有函数中传递转子。 – SenorAmor

它在标签中头 –

当head（看控制台）：

http://jsfiddle.net/m2wce/

这是因为你被宣布关闭和执行的时候了。当您在head中执行它时，DOM尚未准备就绪，并且此img标记尚不存在。

当body，引用img后，它的工作原理：

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

来源

2013-06-21 14:01:57 acdcjunior

这里可能会更清楚，**看看控制台**：（1）'head'中的代码 - 在'img'之前 - 不工作：http：（2）代码在'img' - working：http://jsbin.com/ovuhet/2/edit之后。 – acdcjunior

你的脚本您的页面的主体之前加载，所以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-21 14:02:41 bdesham

如果你打算这样做，会更好，因为'var rotator; .... if（！rotator）{rotator = document.getElementById（'rotator'）;如果（！rotator）{return; }}类型的东西。 – AD7six

@ AD7six伟大的建议，谢谢。我已经将这件作品添加到了我的答案中。 – bdesham

你需要你的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); 
})();

如果你把里面的头anynomous函数内的代码（如你所做的那样），那么它将无法从大教堂加载图像元素，因为大教堂不会完全在那个时候加载。

来源

2013-06-21 14:15:01

-1

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

来源

2016-10-11 03:59:23 GoodBoyth

无法设置null的属性'src'

回答

相关问题