我正在尝试使用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>
只需在标题中的脚本标记中添加延迟即可。像这样：
<script type="text/javascript" src="main.js" defer></script>
我推迟了你的代码尝试了。
你看，没有推迟发生的事情是在图像和其他html体元素之前加载javascript文件。因此，javascript代码试图获得对图像标签的引用，它什么也没找到。因为他们还没有加载。这就是为什么你使用defer它告诉浏览器在javascript代码之前加载HTML文档的其余部分
这是一个解释更多的链接（向下滚动到关于延迟的部分）：
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
或者，您可以在body元素的末尾添加脚本标记。因此迫使浏览器在最后加载脚本。
如果你想要更多，请查看Mozilla开发者网络关于javascript的教程。
这是一个链接：https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps
HTML中的脚本放在目标HTML元素之后。因此，当调用HTML中的脚本时，您的目标HTML元素已准备就绪。相反，当您链接到head中的单独脚本文件时，脚本运行时尚未加载目标HTML元素。
解决方案：不要直接在carousel();中调用<script>，而是在<body onload="carousel();">中调用它
它将是您的文件目录链接
<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);
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.您还可以使用浏览器调试工具控制台来帮助显示背后发生的事情。