Change Random background image to another random background (with Fade Transition)

Question

I'm trying to make a website, where background image of Div-element changes every time the user reloads the page. That background image of that Div-element should always be random.

It should also change to another randomly chosen background image with fade transition after 3-5 seconds.

I've been trying Jquery.Cycle2.js and Jquery.shuffle.js which are working fine, when I'm doing that transition, but they don't change to random background image. They also don't change background image to a random image, when someone reloads page.

I've also been trying image = new Array and use Math.round and Math.random JavaScript elements. They're working fine when I want random background image when someone refreshes/reloads the page, but it's not changing it to another random background image (and therefore, not doing the transition).

So, I would like to have a Div-Element, which has a random background image (and it's always random and changes to another random background image when user reloads the page) and it changes to another random background image after 3-5 seconds with Fade effect.

Answer 1

Create a div for the image inside a main div as mentioned below :

<div style="height: 500%">
    <div id="imageDiv" class="imageContainer"></div>
    Spider Code
</div>

Set the CSS 'imageContainer' :

.imageContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.5;
    z-index: -1;
    background-repeat: no-repeat;
}

Now add couple of images in your solution folder and create array for that. In my case name of images are 1.png, 2.png etc...

and create a script as mentioned below :

<script type="text/javascript" language="javascript">

    var myImages = new Array("1.png", "2.png", "3.png", "4.png", "5.png");

    $(document).ready(function() {
        var random = myImages[Math.floor(Math.random() * myImages.length)];
        random = 'url(images/' + random + ')';
        $('#imageDiv').css('background-image', random);

        setInterval(function() {
            SetImage();
        }, 5000);
    });

    function SetImage() {
        var random = myImages[Math.floor(Math.random() * myImages.length)];

        random = 'url(images/' + random + ')';
        $('#imageDiv').fadeOut(2000);

        setTimeout(function () {
            $('#imageDiv').css('background-image', random);
            $('#imageDiv').fadeIn(2000);
        }, 2000);
    }
</script>

Answer 2

you can try to solve that problem using javascript Random function and give your background images different ID's that would be associated with numbers, and there you go, you have a random shuffle

Answer 3

I would use something like this :

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

source : Random color generator in JavaScript

Than put some magic in... Working DEMO: http://fiddle.jshell.net/re353/