使用 Javascript 更改背景图像

我一直在尝试在我创建的网页之一上创建幻灯片。我创建了一个具有唯一类名的 div，其目标是使用 JavaScript 更改背景图像。到目前为止，我已经能够执行以下操作：

1. 使用 querySelector 捕获我想要更改背景图像的 div
2. 尝试使用 JavaScript 更改所述 div 的背景图像

我一直在使用 DevTools 调试这个函数，但我不明白为什么图像不会改变。知道这里发生了什么吗？我已经包含了下面的代码片段。谢谢。

HTML

<div class="content-one-right">
  <div class="inner-content-one-right">
    <div class="slideshow-container">
      <a class="prev" onclick="transitionSlides(-1)">&#10094;</a>
      <a class="next" onclick="transitionSlides(1)">&#10095;</a>
    </div>
  </div>
</div>

CSS

.content-one-right {
  grid-column: col-start 7 / span 6;
  height: 60vh;
}

.inner-content-one-right {
    height: 90%;
    width: 90%;
}

.slideshow-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url('../images/home-slideshow/home1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.prev, .next {
    cursor: pointer;
    color: #FFF;
    font-weight: bold;
    font-size: 1em;
    border-radius: 0 3px 3px 0;
}

.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

JavaScript

var slideshowIndex = 0;

function transitionSlides(n) {

  var images = ["home1", "home2", "home3", "home4", "home5", "home6"];
  slideshowIndex += n;

  if(slideshowIndex < 0) {
    slideshowIndex = images.length-1;
  }
  else if (slideshowIndex >= images.length) {
    slideshowIndex = 0;
  }

  var getContainer = document.getElementsByClassName('slideshow-container')[0];
  var imageToChange = "url('../images/home-slideshow/" + images[slideshowIndex] + ".jpg')";

  getContainer.style.backgroundImage = imageToChange;

}

我认为问题在于您如何尝试更改背景图像。第一次设置它时，您是在样式表中设置它。您正在那里使用 CSS 属性。

稍后，您尝试使用以下命令更改它.style元素的属性。这些不是同一件事。从这一页 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style:

style 属性对于完全了解 应用于元素的样式，因为它仅代表 CSS 在元素的内联样式属性中设置的声明，而不是那些 来自其他地方的样式规则，例如 部分或外部样式表。

为了澄清这一点，请在这个页面上的控制台中尝试以下操作：document.querySelectorAll('input[type="submit"]')[3].style

这会抓住页面底部的蓝色按钮，上面写着“发布您的答案”。很明显，CSS 中设置了蓝色背景。但是控制台中的 CSSDeclaration 对象只有empty价值观。这是因为它只反映了inline样式，而不是您使用 CSS 应用的样式。

有趣吧？有了这些知识，我认为您可以选择一种或另一种方式来使您的幻灯片按照您期望的方式进行。不过，根本不使用背景图像可能是最简单的。我认为这是传统的img标记那里并使用 javascript 来设置src属性。