每 5 秒换一次图像 JS

jsdev 发表于 Dev

开发者

我想用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。