如何轉換div元素上的多個背景圖像？

我開始與這個Codepen例如：https://codepen.io/dudleystorey/pen/qEoKzZ 如何轉換div元素上的多個背景圖像？

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

Bas ically我想在這部分右側的背景圖像，以5個不同的圖像之間的過渡：

來源

2016-02-18 ByteMyPixel

我曾與一個工作版本更新您的提琴：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」同時設置了太多屬性。「不重複中心固定」屬性分別是定義「背景重複，背景位置和背景附件」的多個屬性。您可以通過只使用「背景」（這被認爲是速記CSS）設置的所有這些一次，或者您也可以通過包裝你的CSS在大括號像這樣單獨設置每個：

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

這也是必要根據當前小提琴的CSS爲每個新圖像設置所有這些。這些已經設定好了，所以不需要再做一遍。您只需更改網址。

小心你的jQuery選擇器。這條線上有太多的時間段，它會導致問題

$（'.. tab-content-wrapper'）。css（'backgroundSize'，「cover」）;

來源

2016-02-18 22:31:30 sm1215

太棒了，謝謝。是的，我意識到我發佈後，我有錯誤的CDN網址在那裏爲jQuery等...我喜歡你的清潔js版本沒有所有的背景屬性，所以非常感謝你！ – ByteMyPixel

哈哈是啊，我起初沒有注意到，直到我不明白爲什麼jQuery不斷顯示未定義，並且謝謝！ – sm1215

更換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

來源

2016-02-18 22:09:05 smdsgn

這樣做了，謝謝！ – ByteMyPixel

不客氣。 – smdsgn

這就是你想要的。使用的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);

來源

2016-02-18 22:09:12 mhodges

如何轉換div元素上的多個背景圖像？

回答

相關問題