身體背景圖像幻燈片過渡，而不是衰落

Question

我有具有用於身體三個不同的圖像和我有一個JavaScript函數改變所述類在這樣

function bgchange() 
    { 
     document.body.className = 'intro2'; 
     setTimeout(bgchange2, 3000); 
    } 

和三類各自具有間不同的背景是這樣的

.intro { 
background: url('../img/home-bg.jpg') no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
background-size: cover; 
-o-background-size: cover; 
-webkit-transition: background 300ms ease-in 200ms; 
-moz-transition: background 300ms ease-in 200ms; 
-o-transition: background 300ms ease-in 200ms; 
transition: background 300ms ease-in 200ms; 
} 

    .intro2 { 
background: url('../img/home-bg2.jpg') no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
background-size: cover; 
-o-background-size: cover; 
-webkit-transition: background 300ms ease-in 200ms; 
-moz-transition: background 300ms ease-in 200ms; 
-o-transition: background 300ms ease-in 200ms; 
transition: background 300ms ease-in 200ms; 
} 

這給了我一個淡出過渡，但不是淡出過渡我要向上滑動的效果，同時新類IMG出現下面，我想一切從CSS背景位置來使用JavaScript但我無法確定它出來了，有什麼幫助？

Answer 1

我不知道我得到了你想要的，但如果我明白了，這可能是一個選擇！

var e = 0; 
 
var images = document.getElementsByTagName('img'); 
 
for(var i = 0; i < images.length; ++i){ 
 
    images[i].style.top = (i * 100) +'%'; 
 
} 
 
setInterval(function(){ 
 
    e++; 
 
    for(var i = 0; i < images.length; ++i){ 
 
     var image = images[i % images.length]; 
 
     console.log(image.style.top); 
 
     image.style.zIndex = '999'; 
 
     relocate(image, -((e % images.length) * 100)+'%', 99); 
 
    } 
 
    console.log('done='+e); 
 
}, 2500) 
 

 
function relocate(image, offset, z){ 
 
    image.style.webkitTransform = 'translateY('+offset+')'; 
 
    image.style.mozTransform = 'translateY('+offset+')'; 
 
    image.style.transform = 'translateY('+offset+')'; 
 
    
 
    image.style.zIndex = 0; 
 
}

#container{ 
 
    margin-top: 50px; 
 
    margin-left: 50px; 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
    
 
    
 
    background: #FFFFFF; 
 
    overflow: hidden; 
 
    
 
    border: 1px solid red; 
 
} 
 
#content{ 
 
    width: inherit; 
 
    height: inherit; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
img{ 
 
    position: absolute; 
 
    width: inherit; 
 
    height: inherit; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    
 
    -webkit-transition: transform 1.5s ease-in 200ms; 
 
     -moz-transition: transform 1.5s ease-in 200ms; 
 
     -o-transition: transform 1.5s ease-in 200ms; 
 
      transition: transform 1.5s ease-in 200ms; 
 
}

<div id='container'> 
 
    <img src= 'http://cdn.playbuzz.com/cdn/4f133d5a-f35e-469a-89d1-71324412246b/9e064c73-1ca4-47ce-a472-606aad942887.jpg'/> 
 

 
    <img src= 'http://www.yosemitepark.com/Images/home-img-02.jpg'/> 
 
    <img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQXOTXgKi8EnXyySIBQeHbDJfYdhxN3_PqtsDl3WgQHfqJXb7_VyQ'/> 
 
    
 
</div>

Answer 2

我們來這裏是爲了幫助你，不爲你做的事情。這不僅僅是完美，想一點點它只需要一點點調整！