gpt4 book ai didi

自动幻灯片放映的 JavaScript 代码无法在单独的 .js 文件中运行,但可以在 html 中运行

转载 作者:行者123 更新时间:2023-12-03 01:12:01 24 4
gpt4 key购买 nike

我正在尝试使用 javascript 制作自动幻灯片。我是 javascript 新手。我从 w3school 得到了这个脚本。如果我在 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>

最佳答案

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

解决方案:而不是调用 carousel();直接在<script>内,调用<body onload="carousel();">

关于自动幻灯片放映的 JavaScript 代码无法在单独的 .js 文件中运行,但可以在 html 中运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52175902/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com