淡入/淡出背景图像没有白色背景

我想创建一个网站的背景图像，随着时间的推移淡入淡出效果，但我不想使用现有的jQuery淡入淡出/淡入淡出因为当一个图像淡出时，在其他图像淡入之前出现白色背景。我找到了一个名为Maximage的插件，它适合我的要求，但它使用img标签，而我想使用背景图像CSS（我有一个很好的这样做的原因）。有谁知道如何做到这一点？淡入/淡出背景图像没有白色背景

这里是我的HTML代码：

<div id="wrapper"> 
//My contain here 
</div>

这里是到目前为止我的JavaScript代码：

//Auto change Background Image over time 
$(window).load(function() { 
    var images = ['img/top/bg-1.jpg','img/top/bg-2.jpg','img/top/bg-3.jpg']; 
    var i = 0; 

    function changeBackground() { 
     $('#wrapper').fadeOut(500, function(){ 
      $('#wrapper').css('background-image', function() { 
      if (i >= images.length) { 
        i = 0; 
       } 

       return 'url(' + images[i++] + ')'; 
      }); 
      $('#wrapper').fadeIn(500); 
     })  
    } 
    changeBackground(); 
    setInterval(changeBackground, 3000); 
});

例子：http://www.aaronvanderzwan.com/maximage/examples/basic.html

来源

2015-04-20 Lee

能否请您提供一个工作的jsfiddle？ –

你只是问如何交叉淡入淡出两个元素，而不是淡出相同的元素，改变背景，并淡化它回来？ – adeneo

AHH！最后！我发现了一种很好的技术！我正在使用双包装。

代码中的问题有点合乎逻辑。你不能褪色和褪色在同一时间单个包装。

所以这个想法是创建两个包装并在它们之间来回切换。我们有一个名为“wrapper_top”的封装器封装了名为“wrapper_bottom”的第二个封装器。而魔法就是放在第二个包装纸上：你的内容。

因此具有以下结构，其准备如下：

<div id='wrapper_top'> 
    <div id='content'>YOUR CONTENT</div> 
    <div id='wrapper_bottom'></div> 
</div>

然后有点JS + CSS和瞧的！这将是动态的任何数量的图像！

下面是执行：http://jsbin.com/wisofeqetu/1/

来源

2015-04-20 17:04:28 Kursion

谢谢，你救了我 – Lee

如果没有必须的背景图像，你可以将所有图像放入#wrapper中，in <img>，它会像魅力一样工作：

<div id="wrapper"> 
    <img src="firstImage" class="imageClass"></img> 
    <img src="secoundImage" class="imageClass"></img> 
    <img src="thirdImage" class="imageClass"></img> 
</div>

然后一些风格。每个图像具有要在同一地点，所以加相对位置#wrapper指定，和绝对位置到.imageClass：

#wrapper{ 
    position: relative; 
} 

.imageClass{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
}

显示：无;将隐藏每个图像。

现在一些JQuery。出现在窗口负载写第一个图像：

$(window).load(function() { 
    $('.imageClass').eq(0).show(); 
});

由.EQ（）“命令”，您可以指定与类一个元素” .imageClass'要准确使用。以0之后，开始只是做这样的事情：

function changeBackground() { 
    var current = 0; 
    //tells which image is currently shown 
    if(current<$('.imageClass').length){ 
     //loop that will show first image again after it will show the last one 
     $('.imageClass').eq(current).fadeOut(500); 
     current++; 
     $('.imageClass').eq(current).fadeIn(500); 
    } else { 
     $('.imageClass').eq(current).fadeOut(500); 
     current=0; 
     $('.imageClass').eq(current).fadeIn(500); 
    } 
} 
    changeBackground(); 
    setInterval(changeBackground, 3000); 
});

这应该工作，希望你会喜欢它。

来源

2015-04-20 14:30:47 Luke

谢谢，但我必须使用回地面图像，而不是图像标记，因为在包装中，我使用其他插件，只能与包装背景图像完美地运行。另一方面，jQuery的fadeIn和fadeOut函数不适合我的导师的要求。他想要这样的东西：http://www.aaronvanderzwan.com/maximage/examples/basic.html（fadeOut后没有白色闪光灯） – Lee

减1因为你不尊重的要求:(我也想要这个解决方案，但使用css属性background-image有点复杂，但是你的代码很好，把一个-1作为一个很好的答案是非常可悲的......可悲的是这是题外话:( – Kursion

对不起，我没有把-1给你，那是别人 – Lee

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(window).load(function() {   
    var i =0; 
    var images = ['image2.png','image3.png','image1.png']; 
    var image = $('#slideit'); 
       //Initial Background image setup 
    image.css('background-image', 'url(image1.png)'); 
       //Change image at regular intervals 
    setInterval(function(){ 
    image.fadeOut(1000, function() { 
    image.css('background-image', 'url(' + images [i++] +')'); 
    image.fadeIn(1000); 
    }); 
    if(i == images.length) 
    i = 0; 
    }, 5000);    
}); 
</script> 
</head> 
<body> 
     <div id="slideit" style="width:700px;height:391px;"> 
     </div> 
</body> 
</html>

来源

2015-07-09 09:48:58 CYRIL

淡入/淡出背景图像没有白色背景

回答

相关问题