JavaScript随机背景图片更改加载

Question

I have 6 ahref boxes on a page which all have different sized background images, what I would like to do is onload get 3 random boxes bg image file extensions, and swap them over for gifs. So every time the page refreshes 3 images are different. Im not entirely sure how to do this, as i want the positions to be random, but have the control by changing the urls and not changing for completely random image.

Answer 1

To get a random 3 nodes from your list you can select them, convert them to an array then pick one by index between 0 and 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.

Answer 2

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

This will generate a random number between 0-5. So you can go ahead and select the respective child

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

If you want random images also try either naming the images so that you can use another random variable to get the images by appending them to the url()