Javascript隨機背景圖像更改onload

我有一個頁面上有6個ahref框，它們都有不同大小的背景圖像，我想要做的是onload獲取3個隨機框bg圖像文件擴展名，並將它們交換爲gif。所以每次刷新頁面時3張圖片都不一樣。我不完全確定如何做到這一點，因爲我想要的位置是隨機的，但通過更改url和不改變完全隨機圖像的控制。Javascript隨機背景圖像更改onload

來源

2013-09-30 Graeme Paul

你的問題有點難以閱讀。如果我明白：你有三個盒子都有不同的背景圖像。每次頁面加載時，您想爲每個框選擇一個隨機圖像？ – Wil

對不起，我總共有6個盒子，在負載上我想改變其中3個背景圖像。但它必須是每個頁面加載的隨機3盒。 –

去獲取圖片爲了讓您的列表中隨機3個節點，您可以選擇它們，將它們轉換成數組，然後0和nodeList.length之間挑一個由指數：

(function (document) { 
    var boxes = document.getElementsByClassName('box'), 
     background = '', 
     index = 0; 

    // Convert the nodeList to an Array 
    boxes = Array.prototype.slice.call(boxes); 

    // Returns a random integer between min and max 
    // Using Math.round() will give you a non-uniform distribution! 
    function getRandomInt(min, max) { 
     return Math.floor(Math.random() * (max - min + 1) + min); 
    } 

    for (var i=0; i<3; i++) { 
     // Pick a random node 
     index = getRandomInt(1, boxes.length) - 1; 
     // Background 
     background = document.defaultView.getComputedStyle(boxes[index]) 
      .backgroundImage 
      .replace('.jpg', '.gif'); 
     boxes[index].style.cssText = "background-image:" + background; 
     // Remove that node so we don't get it again 
     boxes.splice(index, 1); 
    } 

}(document));

Here's a Fiddle to show it in action.

來源

2013-09-30 10:49:00 Wil

感謝Wil，隨機性是正確的。獲取框的當前背景以及更改擴展名是多麼容易。我可以用類似url（「../ static/images /」+ boxes [index] +「.gif」）的方式來做到這一點 –

我剛剛更新了我的答案，以顯示如何從'.jpg'到'.gif'。然後你可以有一個名爲'mybg.jpg'的bg圖像，它將在一個名爲'mybg.gif'的位置交換一個圖像。 – Wil

感謝威爾:)幾乎在那裏，擴展沒有顯示如此即時得到文件/ mybg沒有.gif –

-1

var randomNum = Math.floor(Math.random() * 6)

這將生成一個0-5之間的隨機數。所以，你可以繼續選擇相應的子

$("ul li:nth-child(randomNum)").css('background-image', 'url(http://url you want.com)')

如果你想隨機圖像也嘗試無論是命名的圖像，這樣就可以使用另一個隨機變量它們附加到url()

來源

2013-09-30 09:31:08 Anobik

這會隨機化一個背景圖像，我認爲OP實際上只想改變3（隨機選擇）。它也假設他使用jQuery。 – Wil

對於使用不同的背景圖像，如果他將圖像存儲爲img1.jpg，img2.jpg ....將會更好，並且使用另一個隨機變量並執行'$（'＃img'）。attr（' src'，'../ img'+ randomVariable +'。jpg'）' – Anobik

Javascript隨機背景圖像更改onload

回答

相關問題