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

Question

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

这是我的 HTML PAGE

的代码

我已将 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>

Answer 1

这将是你的文件目录link

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

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

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

我的主文件夹名为 websiteName，其中包含我的所有 html 文件和用于不同内容的子文件夹。我不会亲自将我的 html 个文件放在一个单独的文件中，因为这会使访问变得更加复杂。

并将脚本文件放在页面底部

Answer 2

你在函数里面调用了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);

Answer 3

HTML 中的脚本位于目标 HTML 元素之后。因此，当调用 HTML 中的脚本时，您的目标 HTML 元素已准备就绪。相比之下，当您 link 到 head 中的单独脚本文件时，当您的脚本运行.

时，您的目标 HTML 元素尚未加载

解决方法：不要在<script>中直接调用carousel();，而是在<body onload="carousel();">

中调用

Answer 4

1.You 没有显示你的 css 文件，虽然 js 脚本一直在使用 css property.Did 你在你的 [=18] 中提到这些属性 =] 文件?

/* 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.You 也可以使用浏览器的调试工具的控制台帮助显示背后发生的事情。

Answer 5

只需在 header 的脚本标签中添加 defer 即可。像这样：

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

我用 defer 测试了你的代码，它成功了。

你看，没有延迟发生的是 javascript 文件在图像和其余 html body 元素之前加载。因此，javascript 代码试图获取对图像标签的引用，但一无所获。因为它们还没有加载。这就是为什么你使用 defer 它告诉浏览器在 javascript 代码

之前加载 HTML 文档的其余部分

这里 link 对其进行了更多解释（向下滚动到有关延迟的部分）：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

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

如果需要更多内容，请查看 javascript 上的 Mozilla 开发者网络教程。

这里是 link： https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps

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

Javascript code for automatic slideshow is not working in seperate .js file but it is working inside html

html

javascript

slideshow