我的javascript在处理幻灯片图像横幅时哪里出错了？_Javascript_Html_Css

我的javascript在处理幻灯片图像横幅时哪里出错了？

javascript html css

我的javascript在处理幻灯片图像横幅时哪里出错了？,javascript,html,css,Javascript,Html,Css,这是我到目前为止所拥有的，它是一个非常基本的幻灯片图片横幅，在我的html标题标签中。基本上，每3秒钟，我就会有一个新的图像出现。我计划在我现在正在进行的模拟练习中使用它，但不幸的是，Javascript中出现了一些错误。至少，我是这么认为的。图像横幅不会一直穿过图像。它只停留在一张图片上，不去其他任何地方。没有其他照片显示。这就是我现在进入控制台日志的错误 Uncaught TypeError: Cannot read property 'setAttribute' of null. at c

这是我到目前为止所拥有的，它是一个非常基本的幻灯片图片横幅，在我的html标题标签中。基本上，每3秒钟，我就会有一个新的图像出现。我计划在我现在正在进行的模拟练习中使用它，但不幸的是，Javascript中出现了一些错误。至少，我是这么认为的。图像横幅不会一直穿过图像。它只停留在一张图片上，不去其他任何地方。没有其他照片显示。这就是我现在进入控制台日志的错误

Uncaught TypeError: Cannot read property 'setAttribute' of null. at changeImage (slideshow.js:7)

这是我现在的HTML

<html>
<head>
    <title>Kenneth's Slide Show Demonstration</title>
    <meta charset="UTF-8">
    <link rel='stylesheet' type='text/css' href='slideshow.css'>
    <script src="slideshow.js"></script>
</head>
<body>
<div id="wallpaper"><img src="ferrari-logo0.jpg" id="ferrari" alt="ferrari logo"/></div>
</body>
</html>

下面是我制作的Javascript

var myImage = document.getElementById('ferrari');
var imageArray=['ferrari-logo0.jpg', 'ferrari-logo1.jpg', 'Ferrari-logo2', 'ferrari-logo3.jpg'];

var imageIndex=0;

function changeImage() {
    myImage.setAttribute("src", imageArray[imageIndex]);
    imageIndex++;
    if (imageIndex >= imageArray.length) {
        imageIndex = 0;
    }
};

var intervalHandle = setInterval(changeImage(),4000);

function changeImage();

我哪里出错了？如果我能提出特殊要求，我想要纯香草javascript。我知道Jquery很流行，但我现在还没有研究它

函数changeImage（）不需要在setInterval的圆括号中

Uncaught TypeError: Cannot read property 'setAttribute' of null. at changeImage (slideshow.js:7)

试试看。您必须传递函数，而不是调用它

您正在页面头部加载JavaScript，因此当JS运行时，

ferrari

元素还不存在

getElementById

如果找不到具有您提供的

id

的元素，则返回

null

。因此，实际上您正在尝试执行

null.setAttribute（“src”，imageArray[imageIndex]）。由于null
没有setAttribute
方法，因此会收到错误消息，告诉您无法读取null的属性“setAttribute”

将脚本标记移动到法拉利
元素下方应该可以修复它。由于其他与性能相关的原因，这已成为一种最佳做法。如果将代码包装在事件处理程序中，您还可以将脚本标记保留在原来的位置。
您只需要调用changeImage，就像这样setInterval（changeImage，4000）
也changeImage（）
已经定义，您只需要调用它
下面是一个工作示例

document.addEventListener（“DOMContentLoaded”，function（））{
var myImage=document.getElementById（'ferrari'）；
var imageArray=['http://placehold.it/350x150?text=1', 
'http://placehold.it/350x150?text=2', 
'http://placehold.it/350x150?text=3', 
'http://placehold.it/350x150?text=4'
];
var指数=0；
函数changeImage（）{
setAttribute（“src”，imageArray[imageIndex]）；
imageIndex++；
如果（imageIndex>=imageArray.length）{
imageIndex=0；
}
}
var intervalHandle=设置间隔（changeImage，4000）；
changeImage（）；
});
正文{
填充：0；
保证金：0；
}
#墙纸{
高度：300px；
宽度：100%；
保证金：自动；
背景：rgba（0,0,0,0.7）；
边框底部：黑色虚线1px；
过渡：所有0.5s缓进缓出；
}
#法拉利{
左边距：自动；
右边距：自动；
显示：块；
高度：250px；
宽度：400px；
填充顶部：20px；
}
#壁纸：悬停{
背景：rgba（0,0,0,1）；
}

墙纸
预期的输出是什么？我哪里出错了？您能详细说明一下吗？当然，您不会期望我们查看所有这些代码，并试图找出什么（如果有的话）是错误的。给出一个问题的具体例子。请检查浏览器的控制台，查看是否存在任何错误。对不起，措辞不当，我的意思是图像仍然停滞。第一个图像显示出来，但只是粘在一起，横幅没有在图像数组中保持旋转。下面是我得到的未捕获的错误TypeError：无法读取null的属性“setAttribute”，请尝试放置var myImage=document.getElementById（'ferrari'）；函数的内部。在哪里调用脚本？我的意思是添加为您的代码或加载为这个错误，可能是因为您的html没有加载，当脚本执行时。这就是为什么myImage是nulloh，我在上面添加了另一个函数。window.onload=function（）{changeThisShit（）；}；
var imageArray = ['ferrari-logo0.jpg', 'ferrari-logo1.jpg', 'Ferrari-logo2', 'ferrari-logo3.jpg'];

var imageIndex = 0;

function changeImage() {
    var myImage = document.getElementById('ferrari');
    if (myImage) {
        myImage.setAttribute("src", imageArray[imageIndex]);
        imageIndex++;
        if (imageIndex >= imageArray.length) {
            imageIndex = 0;
        }
    }
};

var intervalHandle = setInterval(changeImage, 4000);