gpt4 book ai didi

javascript - 自动幻灯片不工作 JavaScript

转载 作者:行者123 更新时间:2023-11-28 04:02:09 24 4
gpt4 key购买 nike

我目前正在尝试从 W3School 了解如何使用 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>

JavaScript:

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, 2000); // Change image every 2 seconds
}

CSS:

#main_adverts{
width: 70%;
height: 70%;
position: absolute;
top: 20%;
left: 15%;
border: 1px solid black;
}

#main_adverts img{
width: 100%;
height: 100%;
position: absolute;
}

最佳答案

对于将来可能遇到此问题的任何人。解决此问题的最安全方法是像下面这样包装您的代码:

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

这样一来,无论您将 JavaScript 放在 HTML 文件中的什么位置,它都会等待页面完全加载后再执行。

关于javascript - 自动幻灯片不工作 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43149429/

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