Question

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

使用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：

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

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

这会抓住页面底部的蓝色按钮，上面写着＆＃34;发布你的答案＆＃34;。很明显它有一个在CSS中设置的蓝色背景。但是控制台中的CSSDeclaration对象只有空值。这是因为它只反映了内嵌样式，而不是您使用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更改背景图像

2 个答案: