logo标签列表

使用jQuery实现背景图片的渐变效果

javascriptjquerycsshtml
4

我有一些图片，想要将它们作为幻灯片显示在背景中。然而，我希望图片在当前图片和下一张图片之间实现淡入淡出的效果。到目前为止，我只能在这些图片之间进行切换：

$(document).ready(function () {

    var images = ["landing_background_1.jpg", "landing_background_2.jpg", "landing_background_3.jpg", "landing_background_4.jpg"];

    var currentImage = 0;


    function changeBackgroundImage() {


        $("html").fadeIn().css({

            "background-image": "url('img/backgrounds/" + images[++currentImage] + "')",

        });


        if (currentImage >= images.length - 1) {

            //set it back to the begining
            currentImage -= images.length;

        }

    }


    setInterval(changeBackgroundImage, 1500);

});

任何帮助都非常感激！ :)
在JS中完成的交叉淡入淡出效果需要两个分别可见的图像，一个淡出，另一个淡入。你不能只是用纯JavaScript切换单个图像并获得交叉淡入淡出效果。显然，你可以使用CSS3实现这一点。 - jfriend00
http://jqueryfordesigners.com/image-cross-fade-transition/ - eclipsis
3个回答
6
你需要做的是将两个元素叠在一起。然后让一个元素淡出，另一个元素淡入。
以下是我处理的方法...
CSS...
#background-images {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1;
    }

#bImg1 {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 3; 
    background: url(starting-img1.jpg) no-repeat; 
    background-size: contain;
    }

#bImg2 {
    display: none;
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 2; 
    background: url(starting-img2.jpg) no-repeat; 
    background-size: contain;
    }

.container {
    width: 960px;
    height: 900px;
    background: rgba(255,255,255,.7);
    margin: auto;
    position: relative;
    z-index: 10;
}

The html ...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<html>
<body>
    <div id="background-images">
        <div id="bImg1"></div>
        <div id="bImg2"></div>
    </div>
    <div class="container">
        Content Here
    </div>
</body>
</html>

The script ...

var imageSet1 = ["image1.jpg", "image2.jpg", "image3.jpg"];
var currentImageSet1 = 0;

var imageSet2 = ["image4.jpg", "image5.jpg", "image6.jpg"];
var currentImageSet2 = 0;

function changeBackgroundImages() {
    img1Fade();
    setTimeout(img2Fade, 2000);

}

function img1Fade(){

    $('#bImg1').fadeOut('slow', function(){$('#bImg1').css({background: 'url(' + imageSet1[++currentImageSet1] + ')'})});
    $('#bImg2').fadeIn('slow');
    if (currentImageSet1 >= imageSet1.length - 1) {

            currentImageSet1 -= imageSet1.length;
        };
}

function img2Fade(){

    $('#bImg2').fadeOut('slow', function(){$('#bImg2').css({background: 'url(' + imageSet2[++currentImageSet2] + ')'})});
    $('#bImg1').fadeIn('slow');
    if (currentImageSet2 >= imageSet2.length - 1) {

            currentImageSet2 -= imageSet2.length;
        };
}

$(document).ready(function(){

    setInterval(changeBackgroundImages, 5000);
});

您需要调整时间，以使其看起来更好。确保将您的url设置为图像数组中的图像或在构建css中的字符串时。

是的，但我不明白如何使用jquery来定位这样的背景图像。 - Elmer
5

我花了很多时间寻找最简洁易懂的方法。最终，这个方法可行：

var i=0;
var imghead=[
 "url(http://yoururl.com/picture0.jpg)",
 "url(http://yoururl.com/picture1.jpg)"
 ];//add as many images as you like

function slideimg() {
    setTimeout(function () {
        jQuery('#element').css('background-image', imghead[i]);
        i++;
        if(i==imghead.length) i=0;
        slideimg();
    }, 6000);
}
slideimg();
#element{
 height: 100%;
 overflow: hidden;
 opacity: 1.0;
 -webkit-transition: background-image 1.5s linear;
 -moz-transition: background-image 1.5s linear;
 -o-transition: background-image 1.5s linear;
 -ms-transition: background-image 1.5s linear;
 transition: background-image 1.5s linear;
}

1
这在基于Webkit的浏览器中可以工作，但不是标准的; background-image不是可动画化属性：https://www.w3.org/TR/css-transitions-1/#animatable-properties - Grodriguez
0
更简单：
var current = 1;
function anim() {
   if(current == 4) {current = 1;   }
   $('#bImg'+ current).fadeOut(3000);
   ++current;
   $('#bImg'+ current).fadeIn(3000);
   setTimeout(anim, 8000);
}
anim();

HTML：

 <div class="inside" >
        <div id="bImg2"></div>    
        <div id="bImg3"></div>    
    </div>

CSS：

.inside {
 background:url(top_01.jpg) no-repeat center top ;
}


#bImg2 {
position: absolute;
top: 0px;
width: 100%;
background:url(top_02.jpg) no-repeat center top ;
 display: none;
}

  #bImg3 { 
position: absolute;
top: 0px;
width: 100%;
background:url(top_03.jpg) no-repeat center top ;
 display: none;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接