使用 Javascript 更改背景图片

Question

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

捕获 div 我想使用 querySelector
试图使用 JavaScript

我一直在使用 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;

}

Answer 1

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

稍后，您尝试使用元素的 .style 属性更改它。这些不是一回事。来自 this page:

The style property is not useful for completely learning about the styles applied on the element, since it represents only the CSS declarations set in the element's inline style attribute, not those that come from style rules elsewhere, such as style rules in the section, or external style sheets.

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

这会抓住页面底部的蓝色按钮 "Post Your Answer"。 CSS 中设置的蓝色背景非常明显。但是控制台中的 CSSDeclaration 对象只有 empty 值。那是因为它只反映内联样式，而不是您应用 CSS.

的样式

有趣吧？有了这些知识，我认为你可以选择一种或另一种方式来让你的幻灯片按你期望的方式发生。不过，根本不使用背景图像可能是最简单的。我认为在那里有一个 img 标签并使用 javascript 设置 src 属性是常规的。

Answer 2

您运行遇到了与 in this post 相同的问题。那里也提供了很好的信息。当运行您在 JSFiddle 中的代码时，它只会抛出以下异常： transitionSlides is not defined. 删除 onclick 处理程序并改用 addEventListener()。最好为您的上一个和下一个按钮使用 ID，但这会起作用：

HTML:

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

JavaScript:

var slideshowIndex = 0;

document.getElementsByClassName('prev')[0].addEventListener("click", function() {
    transitionSlides(-1);
}, false);
document.getElementsByClassName('next')[0].addEventListener("click", function() {
    transitionSlides(1);
}, false);

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;

}

使用 Javascript 更改背景图片

Changing background image using Javascript

javascript

css

getelementsbyclassname