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

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。对不起，我的语法。

来源

2015-09-04 dango sjv

在你的代码片段中添加Html – Tushar

尝试一次使用Style backgroundImage属性即'element.style.backgroundImage =“url（'”+ images [0] +“'）”;'你还需要__move'var images = []'to global scope__ – Satpal

@Satpal - 'images'作为函数参数传递，它不需要是全局的。 – Quentin

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

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

为该属性设置新值将替换旧值。

您正在移除背景图像的样式。（所以样式表中的一个被重新应用）。

我该怎么做才能使它工作？

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

Use .style.cssPropertyName = ...改为。

来源

2015-09-04 07:38:41 Quentin

谢谢......现在正在工作。 –

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

回答

相关问题