更改背景與JS的div img

Question

試圖用淡入淡出改變div的類別在循環中出入效果，有人可以幫助我嗎？

我只希望他們能夠在循環中每隔1秒自動淡入淡出。

我的div

.jumbotron { 
 
\t background-image: url('http://r6siegepro.pl/headerbgdark.png'); 
 
\t background-color: #fff; 
 
\t background-size: cover; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.jumbotron2 { 
 
\t background-image: url('http://r6siegepro.pl/headerbgdark2.png'); 
 
\t background-color: #fff; 
 
\t background-size: cover; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
h1 { 
 
    height: 100%; 
 
}

 <div class="jumbotron"> 
 
     <div class="container"> 
 
     <h1>SOME SAMPLE TEXT TO FILL EMPTY SPACE</h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p> 
 
     </div> 
 
     </div> 
 
    

Answer 1

不要更改類時，你可以更改背景圖片：

var swtich_bg = document.querySelectorAll('.jumbotron')[0]; 
var switch_bg_toggle; 

setInterval(function(){ 
    if (switch_bg_toggle) { 
    swtich_bg.style.backgroundImage = "url('http://r6siegepro.pl/headerbgdark.png')"; 
    switch_bg_toggle = false; 
    } else { 
    swtich_bg.style.backgroundImage = "url('http://r6siegepro.pl/headerbgdark2.png')"; 
    switch_bg_toggle = true; 
    } 
}, 1000); 

就在CSS添加轉場：

.jumbotron { 
    background-image: url('http://r6siegepro.pl/headerbgdark.png'); 
    background-color: #fff; 
    background-size: cover; 
    transition: background-image .5s linear; 
} 

在這裏你有JSBin：https://jsbin.com/mafimonoce/edit?html,output

Btw。不要將其設置爲1秒，請使用3秒左右的間隔和〜10秒的間隔。