使用 SetInterval 从英雄部分中的数组更改图像

Question

我正在制作一个作品集网站，并希望每隔几秒使用 SetInterval 制作一个带有过渡图像的英雄部分。我试过这个：

请注意，我将背景图片放在 CSS 中，而不是作为 HTML 中的 img。

var images = [
'https://via.placeholder.com/728x90.png?text=slide1',
'https://via.placeholder.com/728x90.png?text=slide2',
'https://via.placeholder.com/728x90.png?text=slide3',
'https://via.placeholder.com/728x90.png?text=slide4',
];
var container = document.getElementById('hero');
var i = 0;
setInterval(function() {
  var newImg = "url('" + images[i] + "')"
//  console.log(newImg);
  container.style.background = newImg;
  i = i + 1;
  if (i == images.length) {
    i = 0;
  }
}, 1000);

#hero {
  height: 100vh;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.342), rgba(0, 0, 0, 0.342)), url('https://via.placeholder.com/728x90.png?text=slide1') fixed no-repeat center / cover;
  color: #fff9ff;
  transition: opacity 1s;
  opacity: 1;
}

<section id="hero">
  <div class="heroContainer">
    <div id="info">
      <h1>Lorem Ipsum</h1>
      <h2>Lorem ipsum.</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis nesciunt excepturi quos obcaecati incidunt voluptatem ipsam sunt ipsum, autem deleniti cupiditate molestias quis unde quae totam porro dicta</p>
      <a id="heroButton" href="#">Contact Me</a>
    </div>
  </div>

图像没有过渡，我收到以下错误：

url('未定义')

main.js:70 Uncaught TypeError: Cannot set properties of undefined (setting 'background')

有人知道为什么吗？顺便说一句，我想继续使用 SetInterval！

Answer 1

正如其他人所提到的，您需要确保 JavaScript 在 DOM 加载之后执行 。

我正在更新 CSS 变量，而不是设置 style。我只是觉得这样更方便。

我也摆脱了i 变量，而是使用Array.prototype.shift()（从最后一个位置删除 - 返回已删除的项目）和Array.prototype.push() 只是更改数组中图像的位置。

如您所知，加载图像需要一段时间。您可以通过预加载图像来解决此问题，但我不会在这里介绍。

如果你有一个更平滑的过渡也会更好（两个图像改变不透明度）。

我也希望你不打算有一秒钟的间隔。也许改为每 30 秒更换一次：

var images = [
  'https://via.placeholder.com/701x90',
  'https://via.placeholder.com/702x90',
  'https://via.placeholder.com/703x90',
  'https://via.placeholder.com/704x90'
];

window.addEventListener("load", startBackgroundTransition);

function startBackgroundTransition() {
  var container = document.getElementById('hero');

  setInterval(function() {
    container.style.setProperty("--background-image", `url(${images[1]})`);
    images.push(images.shift());
  }, 1000);
}

#hero {
  --background-image: url(https://via.placeholder.com/701x90);
  height: 100vh;
  width: 100%;
  background: 
    linear-gradient(rgba(0, 0, 0, 0.342),
    rgba(0, 0, 0, 0.342)), 
    var(--background-image) fixed no-repeat center / cover;
  color: #fff9ff;
  /*transition: opacity 1s;
  opacity: 1;*/
}

<section id="hero">
  <div class="heroContainer">
    <div id="info">
      <h1>Lorem Ipsum</h1>
      <h2>Lorem ipsum.</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis nesciunt excepturi quos obcaecati incidunt voluptatem ipsam sunt ipsum, autem deleniti cupiditate molestias quis unde quae totam porro dicta</p>
      <a id="heroButton" href="#">Contact Me</a>
    </div>
  </div>

Answer 2

你为什么使用setInterval？

For 循环可以处理这个问题：

var images = [
'https://via.placeholder.com/728x90.png?text=slide1',
'https://via.placeholder.com/728x90.png?text=slide2',
'https://via.placeholder.com/728x90.png?text=slide3',
'https://via.placeholder.com/728x90.png?text=slide4' // < un-needed comma
];
var container = document.getElementById('hero'); // Make sure you call the script after the element

for (var i = 0; i < images.length; i++) {

  // No need for quote marks in css "url()"

  var newImg = "url(" + images[i] + ")";
  container.style.background = newImg;

  if (i >= images.length) {
    i = 0;
  }
}

或者while循环：

var images = [
'https://via.placeholder.com/728x90.png?text=slide1',
'https://via.placeholder.com/728x90.png?text=slide2',
'https://via.placeholder.com/728x90.png?text=slide3',
'https://via.placeholder.com/728x90.png?text=slide4' // < un-needed comma
];
var container = document.getElementById('hero'); // Make sure you call the script after the element
let i = 0;
do {
  // No need for quote marks in css "url()"
  var newImg = "url(" + images[i] + ")";
  container.style.background = newImg;
  if (i >= images.length) {
    i = 0;
  }
} while (i < images.length);

jQuery:

var images = [
'https://via.placeholder.com/728x90.png?text=slide1',
'https://via.placeholder.com/728x90.png?text=slide2',
'https://via.placeholder.com/728x90.png?text=slide3',
'https://via.placeholder.com/728x90.png?text=slide4' // < un-needed comma
];
var container = $("#hero");

for (var i = 0; i < images.length; i++) {
  var newImg = "url(" + images[i] + ")";
  container.css("background", newImg);

  if (i >= images.length) {
    i = 0;
  }
}

jQuery while 循环：

var images = [
'https://via.placeholder.com/728x90.png?text=slide1',
'https://via.placeholder.com/728x90.png?text=slide2',
'https://via.placeholder.com/728x90.png?text=slide3',
'https://via.placeholder.com/728x90.png?text=slide4' // < un-needed comma
];
var container = $("#hero"); // Make sure you call the script after the element
let i = 0;
do {
  var newImg = "url(" + images[i] + ")";
  container.css("background", newImg);
  if (i >= images.length) {
    i = 0;
  }
} while (i < images.length);

您还为 css "url()" 值加上了引号。

您也不应该在处理完成后将i 改回 0，因为这会导致无限循环。

编辑：您说您使用setInterval 延迟 1 秒。

您可以在 for 循环中添加 setTimeout：

JavaScript

var images = [
'https://via.placeholder.com/728x90.png?text=slide1',
'https://via.placeholder.com/728x90.png?text=slide2',
'https://via.placeholder.com/728x90.png?text=slide3',
'https://via.placeholder.com/728x90.png?text=slide4'
];
var container = document.getElementById('hero');
for (var i = 0; i < images.length; i++) {
  setTimeout(function() {
    var newImg = "url(" + images[i] + ")";
    container.style.background = newImg;

    if (i >= images.length) {
      i = 0;
    }
  }, 1000); // 1000ms -> 1s
}