身体背景图像幻灯片转换而不是淡入淡出

I have three different images that I have for the body and I have a javascript function that changes the class in between as such

我有三个不同的图像,我有身体,我有一个javascript函数,在这之间改变类

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

and the three classes that each has a different background looks like this

并且每个具有不同背景的三个类看起来像这样

.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;
}

This gives me a fade transition but instead of a fade transition I want a slide up effect while the new class img appears underneath, I tried everything from css background-position to using javascript but I couldn't figure it out, any help?

这给了我一个淡入淡出过渡,但我没有淡入淡出过渡,我想要一个新的类img出现在下面的滑动效果,我尝试了从CSS背景位置到使用javascript的所有内容,但我无法弄明白,任何帮助?

2 个解决方案

#1

I am not sure I got what you want but if I understood right this could be an option!

我不确定我得到了你想要的东西,但如果我理解得对,这可能是一个选择!

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>

#2

We are here to help you, not to do things for you. That's is more than perfect, think a little bit it only need a little tweak!

我们在这里为您提供帮助,而不是为您做事。这不仅仅是完美的,想想它只需要一点点调整!

#1