我想在html中制作一个网站。在我的标题中，我想每5秒交换一次图像。我找到了一个stackoverflow帖子(例如，如何每5秒改变一个图像?)，但接受的答案不起作用。我使用w3.css.
这是我的实际代码:
<!DOCTYPE html>
<html>
<head>
<title>Elonia Network</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylr.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="script.js"></script>
</head>
<body>
…
<header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
<img id="main" class="w3-image" src="images/spawn.png" alt="spawn" width="1500" height="800">
<div class="mainSlider">
<img src="images/craft.png" style="display: none;">
<img src="images/ffa.png" style="display: none;">
</div>
<div class="w3-display-middle w3-margin-top w3-center">
<h1 class="w3-xxlarge w3-text-white">
<span class="black">
<b>Elonia Network</b>
<hr>
<b>IP: <i>confidential</i></b>
<b>Port: 19595</b>
</span>
</h1>
</div>
</header>
let images = ["images/ffa.png", "images/craft.png"];
let index = 0;
const imgElement = document.querySelector("#main");
function change() {
imgElement.src = images[index];
index > 1 ? index = 0 : index++;
}
window.onload = function () {
setInterval(change, 5000);
};
误差
您应该检查index是否大于0
还将您的代码包装在DOMContentLoaded侦听器中，以确保在选择它们时加载元素:
document.addEventListener("DOMContentLoaded", function() {
let images = ["https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1", "https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176"];
let index = 0;
const imgElement = document.querySelector("#main");
function change() {
imgElement.src = images[index];
index > 0 ? index = 0 : index++;
}
window.onload = function() {
setInterval(change, 5000);
};
})<!DOCTYPE html>
<html>
<head>
<title>Elonia Network</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylr.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="script.js"></script>
</head>
<body>
…
<header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
<img id="main" class="w3-image" src="images/spawn.png" alt="spawn" width="1500" height="800">
<div class="mainSlider">
<img src="images/craft.png" style="display: none;">
<img src="images/ffa.png" style="display: none;">
</div>
<div class="w3-display-middle w3-margin-top w3-center">
<h1 class="w3-xxlarge w3-text-white">
<span class="black">
<b>Elonia Network</b>
<hr>
<b>IP: <i>confidential</i></b>
<b>Port: 19595</b>
</span>
</h1>
</div>
</header>