4

正如问题所说，我正在尝试将背景图像从一张图像淡化到另一张图像中。我希望初始图像在页面加载时立即出现，然后让它淡出到下一个图像，然后到下一个，然后再回到第一个，正在进行中。

我在 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 中的图像之间淡入淡出？谢谢您的帮助。

4

3 回答 3

3

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

基本上我在这里做了什么：

  1. 创建了一个#bannerContainer具有position:relative;
  2. 添加position:absolute; top:0px; left:0px;到.banner-image.
  3. 将一些.banner-image插入到父级中，给每个不同的背景图像

  4. 应用了以下 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-26T21:09:17.747 回答
1

它不是即插即用的解决方案，但这里有一个 JQuery 代码来更改带有fadein效果的背景图像

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

还指定其他一些 CSS 属性，background-size以保持您想要的比率。

于 2013-07-26T20:52:57.820 回答
0

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

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

于 2014-11-17T14:18:34.087 回答