如何在 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();

我在这里尝试的小提琴：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

我已经用一个工作版本更新了你的小提琴：https://jsfiddle.net/sm1215/r5or5w6m/3/

有几件事情发生了

1. 您的外部资源错误地拉入了 jQuery-ui 而不仅仅是 jQuery。如果您检查控制台，您会发现 jQuery 未定义存在问题。这是首先检查以确保加载了正确的资源。

2. 下面这条线有点偏离。

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

您一次为“backgroundImage”设置了太多属性。属性“no-repeat center center fixed”是多个属性，分别定义了“background-repeat、background-position和background-attachment”。您可以通过使用“背景”（这被认为是简写 css）一次设置所有这些，或者您可以通过将 css 包裹在花括号中来单独设置每个，如下所示：

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

也没有必要根据您当前小提琴的 CSS 为每个新图像设置所有这些。这些已经在那里设置了一次，因此无需再次执行所有操作。您只需要更改 URL。

1. 小心你的 jQuery 选择器。这条线的句号太多，会出问题

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

Answer 2

在您的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 3

这就是你想要的。对这种类型的事情使用 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);