2015-12-15 145 views
0

我試圖在刷新時更改背景圖像和顏色。我可以隨機化背景圖像,但不能使用顏色。在刷新時更改背景圖像和顏色更新

例如:
BG-1.JPG - 色1
BG-2.JPG - 色2
BG-3.JPG - 色3

我知道可以隨機化圖像,我只是不能爲每個圖像匹配的顏色與下面的代碼:

$(document).ready(function() { 
    var bgArray = ['A-VOLTE.jpg', 'AL-DI-LA.jpg', 'CON-TE.jpg', 'DAVIDE-E-GOLIA.jpg', 'DELLE-VERITA.jpg', 'DI-NOI.jpg', 'DIVIDERE.jpg', 'FA-NIENTE.jpg', 'FORSE.jpg', 'GRAZIE.jpg', 'IL-CONTATTO.jpg', 'IL-PONTE.jpg', 'IMPERATIVO.jpg', 'INDELEBILE.jpg', '-VOLONTA.jpg', 'MERITAVI.jpg', 'MUOVERE.jpg', 'NEL-DUBBIO.jpg', 'NESSUNO.jpg', 'NON-LO-SAI.jpg', 'PER-DIMENTICARE.jpg', 'PRIMA-DI-ANDARE.jpg', 'PROFONDO.jpg', 'SARA-SUO.jpg', 'SEMPRE.jpg', 'TUTTO-DA-RIFARE.jpg', 'TUTTO-PER-TE.jpg', 'UN-RICORDO.jpg', 'UNTITLED-1.jpg', 'UNTITLED-2.jpg', 'VERO.jpg', 'VIENI-CON-ME.jpg']; 
    var bg = bgArray[Math.floor(Math.random() * bgArray.length)]; 
    var path = 'artworks/abstract/'; 
    var imageUrl = path + bg; 
    $('body').css('background-image', 'url(' + imageUrl +')'); 
}); 

回答

0

您可以添加包含每個背景的配色代碼數組,然後添加一個風格的body

$(document).ready(function() { 
    var bgArray = ['...']; 
    var colorsArray = ['...']; 
    var rng = Math.floor(Math.random() * bgArray.length); 
    var bg = bgArray[rng]; 
    var color = colorsArray[rng]; 

    var path = 'artworks/abstract/'; 
    var imageUrl = path + bg; 
    $('body').css('background-image', 'url(' + imageUrl +')'); 
    $('body').css('background-color', color); 
}); 

在這種情況下,你會得到一個bgcolor提供匹配顏色是一樣的指數(在colorsArray)爲背景(在bgArray)的匹配。

這是fiddle

+0

哇,謝謝你的幫助!不能相信我有多想這個! – user3233314

+0

沒問題!如果有幫助,考慮接受這個答案。 –

+0

當然!令人敬畏的工作! – user3233314