我目前正在尝试从 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/