Question

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

未捕获的TypeError：无法读取属性＆＃39; style＆＃39;未定义的在幻灯片中（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>

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

我认为问题在于javascript无法在div中访问图像。

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选择器）。

无法阅读属性＆＃39; style＆＃39;在幻灯片错误中未定义的错误

1 个答案: