Script exchange image every reload

4

I have 5 banners at home, and I would like every upload from home to display one of the banners.
Ex: I visited the site and displays the banner 1 , I browsed some page and came back home displays banner 2 I believe it would work every time I please refresh the page.

    
asked by anonymous 12.08.2015 / 19:20

3 answers

5

You can do this by using 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;
}
    
12.08.2015 / 19:31
4

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

In JavaScript it would look 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: link

    
12.08.2015 / 19:29
1

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

If you are only viewing images from a folder, you could list the images in a array in JavaScript , and create a variable that generates a random value according to the amount of images, and this 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);

Here you would call the image as follows:

imagens[j - 1]

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

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

    
12.08.2015 / 19:36