javascript - 每 5 秒 JS 交换图像
问题描述
我想用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>
推荐阅读
- c# - 带有 PushNotificationChannel 的桌面桥应用程序找不到文件“System.Runtime.WindowsRuntime”
- javascript - 加载后是否可以读取脚本或图像标签的内容?
- ssas - ssas 维度仅在使用名称值时重复
- c++ - 通用指数退避重试机制 C++11
- javascript - 在 google.visualization.data.group 中包含字符串列
- javascript - JavaScript 模态
- spring - 这个例子中spring事务是如何工作的以及如何解决LazyInitializationException?
- arrays - 将 int/string 转换为长度为 n 的字节数组
- json - 如何在循环中调用返回 JSON 的 URL
- apache-spark - 如何从 HDFS 中的数据创建 EXTERNAL Spark 表