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 background-position到使用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

我们随时为您提供帮助，而不是为您做事。这不仅仅是完美的，想想它只需要一点点调整！

身体背景图像幻灯片过渡而不是淡入淡出

2 个答案: