Question

所以我有一些图片，我想在背景中将它们显示为幻灯片。但是，我希望图像在当前图像和下一个图像之间交叉淡入淡出。到目前为止，我只能在图像之间切换：

$(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);

});

任何帮助将不胜感激！：）

Answer 1

你要做的是将第二层元素叠加在一起。然后有一个淡出和另一个淡出。

以下是我将如何做...

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;
}

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>

剧本......

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);
});

你需要弄乱时间才能让它看起来不错。确保将您的网址设置为图像数组中的图像或者构建css中的sting。

Answer 2

我花了很多时间找到最干净简单的方法。这最终有效：

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;
}

Answer 3

更容易：

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;
}

交叉淡入淡出背景图像与jQuery

3 个答案: