Question

＆＃13;

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);
}

＆＃13;

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%;
}

＆＃13;

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

Answer 1

如果我删除过渡（元素）;部分，图像旋转得很好。

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

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

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

我该怎么做才能让它发挥作用？

请勿使用setAttribute(..., ...)修改样式。

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

setAttribute background-image无法更改。卡在默认值

1 个答案: