Choose Random Image Background

Use JavaScript to choose a random image from an array

by SlurmMcKenzie

HTML

<div id="frame"></div>

CSS

#frame {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
}

JavaScript

//array of three image urls
//arrays start counting from 0

images = [ 

    
"http://t2.gstatic.com/images?q=tbn:ANd9GcRmRuUyVokFEKb_tLpm9GQhxnWamv9ky0-KyFhiICmipD2OyQhz",
    
"http://26.media.tumblr.com/tumblr_lxmkk13N3m1qbxf6ro1_500.gif",
    
    
"http://26.media.tumblr.com/tumblr_lxnggalXhX1qhrr12o1_400.gif"
    
    ];



function switchImage() {
    
    var frame = document.getElementById('frame');
    console.log(frame);
    frame.style.background = 'url(' + images[getRandomNumber()] + ')';
}

               
function getRandomNumber() {
    //return random num between 0 and array's length
    return Math.floor(Math.random() * images.length);
}

setInterval(switchImage, 1000);