自动幻灯片放映无法使用JavaScript_Javascript_Html_Css_Slideshow

自动幻灯片放映无法使用JavaScript

javascript html css

自动幻灯片放映无法使用JavaScript,javascript,html,css,slideshow,Javascript,Html,Css,Slideshow,我目前正试图了解如何从W3S学校用JavaScript创建幻灯片。手动幻灯片效果很好，但自动幻灯片根本不起作用 HTML: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &

我目前正试图了解如何从W3S学校用JavaScript创建幻灯片。手动幻灯片效果很好，但自动幻灯片根本不起作用

HTML:

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="scripts.js"></script>
</head>

<body>

    <div id="main_adverts">
        <img class="slide" src="images/imgslider1.jpg"/>
        <img class="slide" src="images/imgslider2.jpg"/>
        <img class="slide" src="images/imgslider3.jpg"/>
    </div>
</body>
<html>

对于将来可能遇到这种情况的任何人。解决此问题最安全的方法是按如下方式包装代码：

window.onload = function(){
    //Your code here
}

这样做，无论您将JavaScript放在HTML文件的何处，它都将等待执行，直到页面完全加载。

将js链接放在body标记的最后一行：

<body>
    <!- rest of your html -->
    <script src="scripts.js"></script>
</body>

它是如何工作的？开发人员控制台中是否有错误？没有错误。第一个图像显示，但没有任何转换。请尝试将您的JavaScript移动到页面末尾，在结束正文标记之前，这样做才有效！非常感谢，如果这是一个愚蠢的问题，很抱歉！您试图对尚未呈现到页面的元素执行代码

window.onload = function(){
    //Your code here
}

<body>
    <!- rest of your html -->
    <script src="scripts.js"></script>
</body>