正文背景图像幻灯片过渡而不是淡入淡出

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

我们在这里为您提供帮助，而不是为您做事。这已经非常完美了，稍微想一想就可以了！