如何在 div 元素上转换多个背景图像？

Question

我从这个 Codepen 示例开始：https://codepen.io/dudleystorey/pen/qEoKzZ

JS:

var bgImageArray = ["lonely.jpg", "uluwatu.jpg"..."],
base = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-",
secs = 4;
bgImageArray.forEach(function(img){
    new Image().src = base + img; 
    // caches images, avoiding white flash between background replacements
});

function backgroundSequence() {
    window.clearTimeout();
    var k = 0;
    for (i = 0; i < bgImageArray.length; i++) {
        setTimeout(function(){ 
            document.documentElement.style.background = 
            "url(" + base + bgImageArray[k] + ") no-repeat center center fixed";
            document.documentElement.style.backgroundSize ="cover";
        if ((k + 1) === bgImageArray.length) { setTimeout(function() 
            { backgroundSequence() }, (secs * 1000))} else { k++; }         
        }, (secs * 1000) * i)   
    }
}
backgroundSequence();

我在这里尝试的fiddle：https://jsfiddle.net/ByteMyPixel/x37fk6js/1/

JS:

    var bgImageArray = ['~text?txtsize=69&txt=Slide+2&w=816&h=300&txttrack=0', 
            '~text?txtsize=69&txt=Slide+3&w=816&h=300&txttrack=0'],
    base = "https://placeholdit.imgix.net/",
    secs = 4;
    bgImageArray.forEach(function(img){
        new Image().src = base + img; 
        // caches images, avoiding white flash between background replacements
    });

    function backgroundSequence() {
        window.clearTimeout();
        var k = 0;
        for (i = 0; i < bgImageArray.length; i++) {
            setTimeout(function(){ 
                $('.tab-content-wrapper').css('backgroundImage', 
            "url(" + base + bgImageArray[k] + ") no-repeat center center fixed");
                $('.tab-content-wrapper').css('backgroundSize' , "cover");
            if ((k + 1) === bgImageArray.length) { setTimeout(function() 
            { backgroundSequence() }, (secs * 1000))} else { k++; }         
            }, (secs * 1000) * i)   
        }
    }
    backgroundSequence();

基本上我希望本节右侧的背景图像在大约 5 个不同图像之间转换：

Answer 1

在您的 backgroundSequence() 函数中将 backgroundImage 替换为 background，如下所示：

function backgroundSequence() {
    window.clearTimeout();
    var k = 0;
    for (i = 0; i < bgImageArray.length; i++) {
        setTimeout(function(){ 
            $('.tab-content-wrapper').css('background', "url(" + base + bgImageArray[k] + ") no-repeat center center fixed");
            $('.tab-content-wrapper').css('backgroundSize' , "cover");
        if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 1000))} else { k++; }         
        }, (secs * 1000) * i)   
    }
}

Working fiddle

Answer 2

这就是您想要的。对于这种类型的事情，使用 setInterval() 而不是 setTimeout()：

var bgImageArray = ['~text?txtsize=69&txt=Slide+1&w=816&h=300&txttrack=0',
  '~text?txtsize=69&txt=Slide+2&w=816&h=300&txttrack=0', 
  '~text?txtsize=69&txt=Slide+3&w=816&h=300&txttrack=0'],
    base = "https://placeholdit.imgix.net/",
    secs = 4;
  var index = 1;
    bgImageArray.forEach(function(img){
        new Image().src = base + img; 
        // caches images, avoiding white flash between background replacements
    });
  var intialUrl = "url(" + base + bgImageArray[0] + ")";
  $('.tab-content-wrapper').css('background-image', intialUrl);
  var interval = setInterval(function () {
    var url = "url(" + base + bgImageArray[index%3] + ") no-repeat center center";
    $('.tab-content-wrapper').css({'background': url, 'background-size': 'cover'});
    index++;
  }, 5000);

Answer 3

我已将您的 fiddle 更新为可用版本：https://jsfiddle.net/sm1215/r5or5w6m/3/

有几件事不对劲

您的外部资源错误地引入了 jQuery-ui 而不是 jQuery。如果您检查您的控制台，您会发现 jQuery 未定义存在问题。这是要检查的第一件事，以确保加载了正确的资源。
下面这行有点不对。

$('.tab-content-wrapper').css('backgroundImage', "url(" + base + bgImageArray[k] + ") no-repeat center center fixed ");

您一次为 "backgroundImage" 设置了太多属性。属性 "no-repeat center center fixed" 是分别定义 "background-repeat, background-position, and background-attachment" 的多个属性。您可以通过使用 'background'（这被认为是 shorthand css）一次设置所有这些，或者您可以通过将 css 包裹在花括号中来单独设置每一个像这样：

$('.tab-content-wrapper').css({
    'backgroundImage': "url(" + base + bgImageArray[k] + ")",
    'background-repeat': "no-repeat",
    'background-position': "center center",
    'background-attachment': fixed"
});

也没有必要根据您当前 fiddle 的 CSS 为每个新图像设置所有这些。这些已经在那里设置好了，所以不需要再做一遍。你只需要改变URL。

小心 jQuery 选择器。这行句点太多会出问题

$('..tab-content-wrapper').css('backgroundSize' , "cover");

如何在 div 元素上转换多个背景图像？

How to transition multiple background images on a div element?

css

jquery

transition

background-image