Javascript随机背景图像更改onload

问题描述：

我有一个页面上有6个ahref框，它们都有不同大小的背景图像，我想要做的是onload获取3个随机框bg图像文件扩展名，并将它们交换为gif。所以每次刷新页面时3张图片都不一样。我不完全确定如何做到这一点，因为我想要的位置是随机的，但通过更改url和不改变完全随机图像的控制。Javascript随机背景图像更改onload

你的问题有点难以阅读。如果我明白：你有三个盒子都有不同的背景图像。每次页面加载时，您想为每个框选择一个随机图像？ – 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.

感谢Wil，随机性是正确的。获取框的当前背景以及更改扩展名是多么容易。我可以用类似url（“../ static/images /”+ boxes [index] +“.gif”）的方式来做到这一点 –

我刚刚更新了我的答案，以显示如何从'.jpg'到'.gif'。然后你可以有一个名为'mybg.jpg'的bg图像，它将在一个名为'mybg.gif'的位置交换一个图像。 – Wil

感谢威尔:)几乎在那里，扩展没有显示如此即时得到文件/ mybg没有.gif –

答

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

这将生成一个0-5之间的随机数。所以，你可以继续选择相应的子

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

如果你想随机图像也尝试无论是命名的图像，这样就可以使用另一个随机变量它们附加到url()

这会随机化一个背景图像，我认为OP实际上只想改变3（随机选择）。它也假设他使用jQuery。 – Wil

对于使用不同的背景图像，如果他将图像存储为img1.jpg，img2.jpg ....将会更好，并且使用另一个随机变量并执行'$（'＃img'）。attr（' src'，'../ img'+ randomVariable +'。jpg'）' – Anobik

Javascript随机背景图像更改onload

相关推荐