如何使用jquery淡入淡出背景图像

正如问题所述，我试图将背景图像从一幅图像淡入淡出到另一幅图像。我希望最初的图像能够在页面加载时立即出现，然后让它褪色到下一张图像，然后到下一张图像，然后回到第一张，正在进行。如何使用jquery淡入淡出背景图像

我在CSS背景图像：

.banner-image { 
background:transparent url('../images/8662834823_575a23516d_o.jpg') no-repeat center center; 
-webkit-background-size:cover; 
-moz-background-size:cover; 
background-size:cover; 
height:800px; 
min-width: 1200px; 
}

HTML：

<div class="banner-image"> 

//Content here 
</div>

我想的旗帜形象div来维持它的高度（所以其他div的下面出现的话）。这就是为什么我想将图像保持为CSS背景的原因。

我会如何褪色jQuery中的图像与上述要求？感谢您的帮助。

来源

2013-07-26 user1072337

可能杜佩：http://stackoverflow.com/questions/17886870/fading-a-background-with-jquery –

为什么不使用图像滑块这个？特别是如果你的'.banner-image' div只会显示图像。即使您需要在此之上放置一些文本，也是非常可行的。 – hungerstar

这是这样做没有插件的最简单方法：jsFiddle

基本上我在这里做：

创建具有position:relative;
新增position:absolute; top:0px; left:0px;到.banner-image父#bannerContainer。
插入几个.banner-image到父，给每个应用不同的背景图像

以下的jQuery：

$(function(){ 

    var t = setInterval(function(){ 

     $('.banner-image').last().fadeOut(2000,function(){ // 2 second fade duration 
      $this = $(this); 
      $parent = $this.parent(); 
      $this.remove().css('display','block'); // remove the faded element 
      $parent.prepend($this); // put it as the first element 
     }); 

    },3000); // every 3 seconds 
});

标记：

<div id="bannerContainer"> 
    <div class="banner-image"></div> 
    <div class="banner-image" style="background-image:url(http://ns223506.ovh.net/rozne/00032cb2e758642ee9a942b49689f775/wallpaper-11152.jpg)"></div> 
    <div class="banner-image" style="background-image:url(http://ns223506.ovh.net/rozne/9d1a802255f5c645945047acb4a2bac6/wallpaper-263.jpg)"></div> 
    <div class="banner-image" style="background-image:url(http://ns223506.ovh.net/rozne/bd72cad0602bb9e53b4dc7f3fa4d4db9/wallpaper-4635.jpg)"></div> 
</div>

来源

2013-07-26 21:09:17

以及如何在图片上显示内容？ – user1072337

最好的选择是将所有东西都包裹在另一个容器中，然后在我的代码中添加一个绝对容器兄弟..从那里它定期的网站编程 –

此外，我希望图像占用整个页面宽度，他们没有做那现在。我该怎么做呢？我将#bannerContainer更改为宽度100％，但仍然没有完成整个页面。 – user1072337

这不是一个即插即用的解决方案，但这里是一个jQuery代码与fadein效果

$(document).ready(function(){ 
    $('.banner-image').css({opacity: 0, background-image: 'url(../images/new.jpg)'}).fadeIn(2000); 
});

还指定其他一些CSS像background-size属性来保持你想要的比改变的背景图像。

来源

2013-07-26 20:52:57 sdespont

试试这个演示 - 使用CSS3交叉淡化图像

http://css3.bradshawenterprises.com/cfimg/

来源

2014-11-17 14:18:34

如何使用jquery淡入淡出背景图像

回答

相关问题