更改 div 的背景图片 url答案

【问题标题】：Change Background image url of div更改 div 的背景图片 url
【发布时间】：2016-04-30 09:45:51
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

用途：

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 这是正确的答案，淡化效果应该由你来完成。
首先感谢您的帮助我有一个问题是整个 div 褪色，这不应该是因为 div 中的内容也在褪色
如果你能在这件事上帮助我，对我来说会更有帮助

【解决方案2】：

这样设置：

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

【讨论】：

【解决方案3】：

参考这个答案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++;
};

【讨论】：