Script swap image every Reload

Question

I have 5 banners on the home, and would like each home shipment to display one of the banners.
Ex: I stopped the site and displays the banner 1, navigated some page and returned to home displays the banner 2 I believe the same would work every time I updated the page.

Answer 1

You can do it using a cookie, something like this:

$(function() {
    var bannerAtual = readCookie(bannerAtual);

    switch(bannerAtual) {
    case 1:
        //logica para colocar o banner 1        
        break;
    case 2:
         //logica para colocar o banner 2

        break;
    case 3:
         //logica para colocar o banner 3
        break;
    case 4:
         //logica para colocar o banner 4
        break;
    case 5:
         //logica para colocar o banner 5
        break;      
    default:    
    }

    if(bannerAtual == 5){
        createCookie('bannerAtual',1)
    }else{
        createCookie('bannerAtual',bannerAtual++)
    }

});

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

Answer 2

You can use the localStorage to save and know if there have been visits. If you need something more reliable I suggest you do this with Sessions on the server side.

In Javascript it would be something like:

var visitas = parseInt(localStorage.numeroVisitas, 10) || 0;
localStorage.numeroVisitas = visitas == 2 ? 0 : visitas + 1 ;

var banners = document.querySelectorAll('.banner');
[].forEach.call(banners, function (bn, i) {
    bn.classList[i == visitas ? 'add' : 'remove']('mostrar');
});

jsFiddle: http://jsfiddle.net/8ufo6xk4/

Answer 3

If these banners are coming via database, in the Mysql for example there is the function ORDER BY RAND(), where for each request he would bring a random item.

If you are just viewing images from a folder, you could list the images in a array in the Javascript, and create a variable that generates a random value according to the amount of images, and that value would pull the specific item, for example:

var imagens = ["Imagem 1", "Imagem 2", "Imagem 3"]
var j = Math.floor((Math.random() * items.length) + 1);

Then you would call the image as follows:

imagens[j - 1]

I put -1 because J would generate values between 1 and the number of items, but the keys to array are 0 the amount of itens-1.

This way, whenever the page is reloaded the script will be re-executed, with this, it will always display a different image (or not, it is random, so it is possible to repeat twice or more the same image).