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

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

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

我用工作版本更新了你的小提琴：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”一次设置了太多属性。 “无重复中心固定中心”属性是分别定义“背景重复，背景位置和背景附着”的多个属性。您可以通过使用'background'（这被认为是简写css）一次设置所有这些，或者您可以通过将css包裹在花括号中来单独设置每个：

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

根据您当前的小提琴CSS，也无需为每个新图像设置所有这些内容。这些已经设置好了，所以不需要再次完成。您只需要更改URL。

小心你的jQuery选择器。这一行有太多时期，会引起问题

$（'.. tab-content-wrapper'）。css（'backgroundSize'，“cover”）;

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

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

3 个答案: