无法在幻灯片错误中读取未定义的属性“样式”

Question

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

未捕获的类型错误：无法在 script.js:1 处的幻灯片放映 (script.js:14) 中读取未定义的属性“样式”

这是我的 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>

这是我的 CSS 代码：

.slide {
    display:none;
}

这是我的 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 无法访问图像。

Answer 1

1.您将<script>文件放在幻灯片之前。 所以当你的脚本第一次被执行时，标记还不存在于DOM 。
因为你的幻灯片不存在，在初始for （什么都不做）之后，你会看到这一行

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

但是slides[0]不存在，所以它没有.style属性。

2.每次重新运行该函数时，您都将0的值重新分配给index ，因此它将始终显示相同的幻灯片：第一张。

(3.)您选择display作为显示/隐藏幻灯片的方法，该方法不可动画。 因此，你的幻灯片会突然改变，没有过渡的可能性。

(4.)另外，就个人选择而言，我更喜欢document.querySelectorAll('.slide')到document.getElementsByClassName("slide") 。 我不知道确切的原因。 可能是因为它更短，也可能是因为它允许更灵活的选择器语法（类、ID、属性或任何其他有效的css选择器）。

无法在幻灯片错误中读取未定义的属性“样式”

问题描述

1 个解决方案

解决方案1
6 已采纳 2017-02-02 19:49:23

无法在幻灯片错误中读取未定义的属性“样式”

问题描述

1 个解决方案

解决方案1 6 已采纳 2017-02-02 19:49:23

解决方案1
6 已采纳 2017-02-02 19:49:23