更改背景图片的URL div

问题描述：

我有一个div，为此我想在后台显示多个图像作为淡入淡出通过更改css背景图像无法找到最佳方式。更改背景图片的URL div

我的HTML：

<div id="background"></div>

jQuery的

var bgArr = ["http://malsup.github.io/images/p1.jpg", "http://malsup.github.io/images/p1.jpg", "images/TopImage-03.jpg"]; 
var i = 0; 

// Start the slide show 
var interval = self.setInterval("swapBkgnd()", 5000) 

function swapBkgnd() { 
    if (i > (bgArr.length - 1)) { 
    i = 0 
    $("#background").css("background-image", "url(" + bgArr[i] + ")"); 
    } else { 
    $("#background").css("background-image", "url(" + bgArr[i] + ")"); 
    } 
    i++; 
};

CSS：

#background { 
    position: absolute; 
    min-height: 100%; 
    width: 100%; 
    height: auto; 
    top: 0; 
    left: 0; 
    background: url(http://2.bp.blogspot.com/-ayEwJpMGTPQ/USqliwPWo1I/AAAAAAAAHtI/ab6NHVy0Q48/s1600/tree.jpg) no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

答

用途：

的jsfiddle：代替http://jsfiddle.net/ook3ah4p/

var interval = self.setInterval(swapBkgnd, 5000) // true syntax

：

var interval = self.setInterval("swapBkgnd()", 5000) // wrong syntax

动画：

$('#background') 
    .animate({opacity: 0}, 'slow', function() { 
     $(this) 
      .css({'background-image': "url(" + bgArr[i] + ")"}) 
      .animate({opacity: 1}); 
    });

精湛的做工精细，但淡入淡出效果不会发生要同时图像的变化正确添加淡入效果 – Shaik

？ –

@shaik这是正确的答案，褪色效果应该由你来完成。 –

答

设置它是这样的：

function swapBkgnd() { 
    if (i > (bgArr.length - 1)) { 
    i = 0; 
    } 
    $("#background").fadeOut("slow", function() { 
    $(this).css("background-image", "url(" + bgArr[i] + ")"); 
    $(this).fadeIn("slow"); 
    }); 
    i++; 
};

答

指的这个答案How to fade changing background image

var interval = self.setInterval(swapBkgnd, 5000) 

function swapBkgnd() { 
    if (i > (bgArr.length - 1)) { 
     i = 0 
     $('#background').fadeTo('slow', 0.3, function(){ 
      $(this).css('background-image', 'url(' + bgArr[i] + ')'); 
     }).fadeTo('slow', 1); 
    } else { 
     $('#background').fadeTo('slow', 0.3, function(){ 
      $(this).css('background-image', 'url(' + bgArr[i] + ')'); 
     }).fadeTo('slow', 1); 
} 
i++; 
};

更改背景图片的URL div

相关推荐