用于自动幻灯片放映的Javascript代码在单独的.js文件中不起作用，但在html中起作用

我正在尝试使用javascript制作自动幻灯片。我不熟悉javascripts。我从学校得到了这个剧本。如果我在html代码中使用该脚本，它就会工作。但如果我为脚本使用单独的文件，它将不起作用。 基本上我有很多使用幻灯片的页面。我不想再次将此代码复制并粘贴到不同的html页面

下面是我的HTML页面的代码

我已经将js文件链接到html文件目录，这不是问题，我知道它的附件是正确的。请告诉我怎么走

<script type="text/javascript" src="./scripts/main-script.js"></script>



    <div class="slideshow" id="main-div">
        <img class = "slide fade" src="./images/clean.JPG" alt="Cleaning">
        <img class = "slide fade" src="./images/about.jpg" >
        <img class = "slide fade" src="./images/greenclean.jpg">


        <button class="btn" onclick="location.href='contact.html'"> BOOK A CLEANING</button> <!-- adding button on image --> 
        <div class="text-block" >  CALL NOW 1844-562-5200 </div>


    </div>



    <script>
        var myIndex = 0;
        carousel();

        function carousel() {
            var i;
            var x = document.getElementsByClassName("slide");
            for (i = 0; i < x.length; i++) {
               x[i].style.display = "none";  
            }
            myIndex++;
            if (myIndex > x.length) {myIndex = 1}    
            x[myIndex-1].style.display = "block";  
            setTimeout(carousel, 8000); // Change image every 2 seconds
        }
    </script>  

---

它将是您的文件目录链接

<script type="text/javascript" src="./scripts/main-script.js"></script>

很难说到底是什么问题，因为我不知道你的文件目录布局 我做我的js标签如下

`<script src="javaScript/home.js"></script>`

我的主文件夹名为websiteName，里面有我所有的html文件和不同内容的子文件夹。我个人不会把我的html文件放在一个单独的文件中，因为这样会使访问变得更加复杂

---

然后将脚本文件放在页面底部

您在函数中调用了setTimeout，当然它不起作用，下面是答案：

function carousel() {
            var i;
            var x = document.getElementsByClassName("slide");
            for (i = 0; i < x.length; i++) {
               x[i].style.display = "none";  
            }
            myIndex++;
            if (myIndex > x.length) {myIndex = 1}    
            x[myIndex-1].style.display = "block";  

        }
setTimeout(carousel(), 8000); // Change image every 2 seconds

或者您可以使用如下回调：

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

---

HTML中的脚本放在目标HTML元素之后。因此，当调用HTML中的脚本时，您的目标HTML元素就准备好了。相反，当您链接到head中的单独脚本文件时，在脚本运行时，目标HTML元素尚未加载

---

解决方案：代替呼叫转盘；直接在中，在

1中调用它。虽然js脚本一直在使用css属性，但您并没有显示css文件。您在css文件中提到这些属性了吗

/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
 animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}

---

2.您也可以使用浏览器调试工具的控制台来帮助显示后面发生的事情。

只需在页眉的脚本标记中添加延迟即可。像这样：

<script type="text/javascript" src="main.js" defer></script>

我用DEBER尝试了你的代码，它成功了

您可以看到，在不延迟的情况下，javascript文件是在图像和其他html主体元素之前加载的。因此，javascript代码试图获取对图像标记的引用，但什么也找不到。因为他们还没有上膛。 这就是为什么要使用defer，它告诉浏览器在javascript代码之前加载HTML文档的其余部分

这里有一个链接，解释更多内容，向下滚动到关于延迟的部分：

或者，您可以在body元素的末尾添加脚本标记。从而强制浏览器在最后加载脚本

如果您想了解更多，请查看Mozilla开发者网络的javascript教程

这里有一个链接：

---

我知道我的javascript文件已附加，我使用警报功能检查它是否正常工作。此函数正常工作，但其余代码无效。此代码取自此处，并在html中正常工作。当我在单独的脚本文件中使用此代码时，它不起作用。您尝试过我的解决方案吗？顺便问一下，为什么您要将button和div放在slideshow类中？我尝试过在函数外部设置timeout函数，但它不起作用。或者，您可以尝试使用setInterval而不是setTimeout。您在函数内部调用了setTimeout，当然，这是行不通的——在函数中调用setTimeout绝对没有什么错，这就是为什么要无限期地重复它，作为setInterval的替代方法。按照你的回答，它只会在8秒后运行一次，不会再运行。此外，在您的第一个示例中，您没有将函数传递给setTimeout，而是实际调用它，因此它只会立即运行一次，而setTimeout根本没有任何效果。哦，太好了。我不知道这件事。它现在运行良好，而且Ricky Mo的回答是正确的，如果你想试试的话。我还建议您研究一下使用defer和将script标记放在body元素末尾之间的区别。他们都有各自的长处和短处。是的，我采用了那种方法。似乎两者都做了相同的事情：在触发DOMContentLoaded之前，即当初始HTML文档已完全加载和解析时，执行由defer属性延迟的外部脚本。另一方面，标签上的onLoad属性只有在网页完全加载时才会激发