无法更改 setAttribute 背景图像。卡在默认值

Question

function showHome() {
  removeSlideShow();
  var homeHeader = document.createElement("div");
  homeHeader.setAttribute("id", "homeHeader");
  document.getElementById("window").insertBefore(homeHeader, document.getElementById("content"));
  var slideShowDiv = document.createElement("div");
  var images = ["slideShow/slideShow-1.jpg", "slideShow/slideShow-2.jpg", "slideShow/slideShow-3.jpg", "slideShow/slideShow-4.jpg", "slideShow/slideShow-5.jpg", "slideShow/slideShow-6.jpg", "slideShow/slideShow-7.jpg"];
  homeHeader.appendChild(slideShowDiv);
  startSlideShow(slideShowDiv, images);
  content.innerHTML = "";
}

function startSlideShow(element, images) {
  var iterator = 0;
  element.setAttribute("id", "slideShowDiv");
  element.setAttribute("style", "background-image: url(" + images[0] + ")");
  var startInterval = setInterval(function() {
    iterator++;
    if (iterator == images.length) iterator = 0;
    element.setAttribute("style", "background-image: url(" + images[iterator] + ")");
    element.style = "background-image: url(" + images[iterator] + ")";
    transition(element);
  }, 3000);
}

function removeSlideShow() {
  if (document.getElementById("homeHeader")) {
    document.getElementById("window").removeChild(document.getElementById("homeHeader"));
  }
}

function transition(element) {
  element.setAttribute("style", "opacity:0.01;");
  var i = 0;
  var set = setInterval(function() {
    i += 0.01;
    element.setAttribute("style", "opacity:" + i + ";");
  }, 4);
  setTimeout(function() {
    clearInterval(set);
    element.setAttribute("style", "opacity:1;");
  }, 500);
}

div#homeHeader {
  background-color: #FFF;
  width: 900px;
  height: 280px;
  border: solid 2px #F00;
  border-radius: 20px;
}
div#slideShowDiv {
  background-image: url(slideShow/slideShow-1.jpg);
  background-color: #FFF;
  width: 898px;
  height: 278px;
  border: solid 1px #FFF;
  border-radius: 20px;
  background-size: 100% 100%;
}

我想做的是每 3 秒更换一次背景图片。代码有效，但它没有改变图像，停留在 'slideShow-1.jpg'。如果我删除过渡（元素）；部分，图像旋转得很好。我应该怎么做才能让它工作？我仍然是 Javascript 的初学者，当我变得更好时会学习 jquery。对不起我的语法。

Answer 1

If i remove the transition(element); part, the image rotate just fine.

过渡部分为样式属性设置了一个新值。

为属性设置新值会替换旧值。

您正在删除背景图片的样式。（因此再次应用样式表中的那个）。

What should i do to get it work?

不要使用 setAttribute(..., ...) 修改样式。

Use .style.cssPropertyName = ... 代替。

无法更改 setAttribute 背景图像。卡在默认值

setAttribute background-image can't be changed. Stuck at default value

javascript

css

dom

transition

slideshow