Javascript 无法读取幻灯片放映时未定义的属性“样式”错误_Javascript_Html_Css

Javascript 无法读取幻灯片放映时未定义的属性“样式”错误

javascript html css

Javascript 无法读取幻灯片放映时未定义的属性“样式”错误,javascript,html,css,Javascript,Html,Css,我是javascript新手，我正在尝试在divs中创建幻灯片。但是，当我这样做时，会给我错误消息未捕获的TypeError:无法读取未定义的属性“style” 在slideshow script.js:14 在script.js:1 这是我的HTML代码： <!DOCTYPE html> <html> <head> <title></title> <link rel="styleshee

我是javascript新手，我正在尝试在divs中创建幻灯片。但是，当我这样做时，会给我错误消息

未捕获的TypeError:无法读取未定义的属性“style” 在slideshow script.js:14 在script.js:1

这是我的HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <script type="text/javascript" src="script.js"></script>
        <div id="wrapper">
            <div id="content">
                <div id="top">
                    <img class="slide" src="1.png" style="width:100%">
                    <img class="slide" src="2.png" style="width:100%">
                </div>
                <div id="left">
                </div>
                <div id="middle">
                </div>
                <div id="right">
                </div>
            </div>
        </div>
    </body>
</html>

这是我的Javascript代码：

slideshow();

function slideshow() {
    var index = 0;
    var i;
    var slides = document.getElementsByClassName("slide");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    index++;
    if (index > slides.length) {
        index = 1;
    }    
    slides[index-1].style.display = "block";  
    setTimeout(slideshow, 2000);
}

我认为问题在于，当图像在div中时，javascript无法访问它们。

1。您正在将文件放在幻灯片之前。因此，当第一次执行脚本时，标记在DOM中还不存在。因为您的幻灯片不存在，所以在首字母之后，您将进入这一行

slides[index-1].style.display = "block";

但是幻灯片[0]不存在，因此它没有.style属性

二,。每次重新运行函数时，都会重新指定0的值作为索引，因此它将始终显示相同的幻灯片：第一张

三,。您选择“显示”作为显示/隐藏幻灯片的方法，该方法不可设置动画。因此，您的幻灯片会突然发生变化，不可能过渡

四,。此外，作为个人选择，我更喜欢document.querySelectorAll.slide而不是document.getelementsbyclassnamelide。我不知道确切的原因。可能是因为它更短，也可能是因为它允许更灵活的选择器语法类ids。属性或任何其他有效的css选择器。

1。您正在将文件放在幻灯片之前。因此，当第一次执行脚本时，标记在DOM中还不存在。因为您的幻灯片不存在，所以在首字母之后，您将进入这一行

slides[index-1].style.display = "block";

但是幻灯片[0]不存在，因此它没有.style属性

二,。每次重新运行函数时，都会重新指定0的值作为索引，因此它将始终显示相同的幻灯片：第一张

三,。您选择“显示”作为显示/隐藏幻灯片的方法，该方法不可设置动画。因此，您的幻灯片会突然发生变化，不可能过渡

非常感谢。你的第一点解决了我的问题，现在我有了一个工作的旁白。我不敢相信这个解决办法是多么简单。再次感谢您欢迎光临，@grandmango 227。还有快乐的编码！：}：非常感谢你。你的第一点解决了我的问题，现在我有了一个工作的旁白。我不敢相信这个解决办法是多么简单。再次感谢您欢迎光临，@grandmango 227。还有快乐的编码！：}：