更改BG（CSS）使用自動JS（和慢慢過渡）

Question

我有一個div（我的旋轉木馬的項目之一）與輸入.jpg格式爲BG IMG的內嵌樣式。我想在3秒內自動將該bg更改爲另一個，而不是保持第二個。問題是，用我已經有的代碼，我可以改變bg，但我不知道如何使用getElementById和style來創建平滑過渡。我試過css3，但IE不顯示效果。這是我的JS：

<script> 
    $('#myCarousel').carousel({ 
    interval: 3000, 
    cycle: true 
    }); 

    function show_banner(){ 

    document.getElementById('mainImage').style.backgroundImage="url('images/slider/bg1.jpg')"; 

    } 

    setTimeout(show_banner, 500); 

</script> 

這是HTML：

<div id="mainImage" class="item active" data-interval="9000" style="background: url(images/slider/bg0.jpg)"> 

我知道，我的代碼是一個爛攤子。我也會請你們給我一個更好的組織方式。

P.S：你可能會問，爲什麼我使用一個數據的時間間隔，如果我已經設置在js的間隔（3000）。如果我沒有設置兩個數字，我就不能使間隔工作。我結束了一個不那麼令人滿意的結果：/

我會感謝所有的支持！謝謝！

Answer 1

從一個background-image到另一個的平滑過渡的一種方法是將透明的::after僞元素正方形地放置在原始元素的頂部。

然後，當javascript更新原始元素的classList時，::after僞元素的不透明度可以從完全透明平滑過渡到完全不透明。

見下面的例子：

function newBackground() { 
 
\t var mainImage = document.getElementById('mainImage'); 
 
    setTimeout(function(){ 
 
\t  mainImage.classList.add('showNewBackground');}, 
 
\t 3000); 
 
} 
 

 
window.addEventListener('load',newBackground,false);

div { 
 
position: relative; 
 
width: 160px; 
 
height: 160px; 
 
} 
 

 
div::after { 
 
content: ''; 
 
display: block; 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
width: 160px; 
 
height: 160px; 
 
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAIAAAAiOjnJAAAAFXRFWHRDcmVhdGlvbiBUaW1lAAfgAQgQOAWMlrgJAAAAB3RJTUUH4AEIEDkYI4oG4QAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAhFJREFUeNrt0kEJACAAwEC1f2ct4RDkLsEem3vAfet1AH8yFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5EwFgljkTAWCWORMBYJY5E4ij0Cj28sYHwAAAAASUVORK5CYII='); 
 
opacity: 0; 
 
transition: all 1.5s ease-in-out; 
 
} 
 

 
div.showNewBackground::after { 
 
opacity: 1; 
 
}

<div id="mainImage" style="background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAIAAAAiOjnJAAAAFXRFWHRDcmVhdGlvbiBUaW1lAAfgAQgQOAWMlrgJAAAAB3RJTUUH4AEIEDkoBVM2TQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAhRJREFUeNrt0sENwCAQwLCD/XdulyBCQvYEeWTNfAOn7dsBvMlYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMRcJYJIxFwlgkjEXCWCSMReIHiD8Cjx+RsOsAAAAASUVORK5CYII=');"> 
 
</div>

N.B.在示例中不要特別注意base-64圖像 - 我只是將它們包括在內以展示效果。您可以用您自己的圖像替換這些圖像中的每一個。