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背景圖像無法更改。在默認值停留

回答

相關問題