Script swap image every Reload

Asked

Viewed 933 times

4

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.

  • @gypsy-Morrison-Mendez can give me a light?

3 answers

5

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;
}

4

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/

  • Guy got stuck in Access 2, that’s right?

  • @Thiagodiniz in my example the logic is with two images. If you need more you can rinse with the script and adapt. Say if you need help.

  • I need help yes :'( I know how to get by with jquery js however embarrassing no .

  • @Would that be how you look? -> http://jsfiddle.net/8ufo6xk4/

  • 1

    This guy, killed the stick was that, in case I would have a banner structure like: <div class="box-banner">&#xA; <a href="">&#xA; <img src="img-1" alt="">&#xA; </a>&#xA; </div>&#xA;&#xA; <div class="box-banner">&#xA; <a href="">&#xA; <img src="img-2" alt="">&#xA; </a>&#xA; </div>&#xA;&#xA; <div class="box-banner">&#xA; <a href="">&#xA; <img src="img-3" alt="">&#xA; </a>&#xA; </div>

  • @Great Thiagodiniz. I added this idea to the answer.

Show 1 more comment

1

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).

Browser other questions tagged

You are not signed in. Login or sign up in order to post.