4

Eu tenho 5 banners na home, e gostaria que a cada carregamento da home exibisse um dos banners.
Ex: acessei o site e exibe o banner 1, naveguei em alguma página e voltei pra home exibe o banner 2 creio que o mesmo funcionaria a cada vez que eu atualizasse a página.

1
  • @cigano-morrison-mendez pode me dar uma luz? Commented 12/08/2015 às 17:20

3 Respostas 3

5

Pode fazer usando cookie, algo parecido com isso:

$(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

Podes usar o localStorage para guardar e saber se já houve visitas. Se precisares de algo mais fiável sugiro fazeres isso com SESSIONs no lado do servidor.

Em JavaScript seria algo como:

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/

6
  • Cara ficou travado no acesso 2, era isso mesmo? Commented 13/08/2015 às 14:01
  • @ThiagoDiniz no meu exemplo a lógica é com duas imagens. Se precisas mais podes brrincar com o script e adaptar. Diz se precisares de ajuda.
    – Sergio
    Commented 13/08/2015 às 14:57
  • preciso de ajuda sim :'( eu sei me virar com jquery js por mais vergonhoso não Nesse caso eu usaria o LS pra guardar o qual foi visto e exibir o próximo e quando chegasse no 3º voltasse ao primeiro. Commented 13/08/2015 às 17:39
  • @ThiagoDiniz seria assim que procuras? -> jsfiddle.net/8ufo6xk4
    – Sergio
    Commented 13/08/2015 às 17:53
  • 1
    isso cara, matou a pau era isso mesmo, no caso eu teria uma estrutura de banners assim: <div class="box-banner"> <a href=""> <img src="img-1" alt=""> </a> </div> <div class="box-banner"> <a href=""> <img src="img-2" alt=""> </a> </div> <div class="box-banner"> <a href=""> <img src="img-3" alt=""> </a> </div> Commented 13/08/2015 às 18:02
1

Caso esses banners estejam vindo via banco de dados, no MySQL por exemplo existe a função ORDER BY RAND(), onde pra cada requisição ele iria trazer um item aleatório.

Se você está apenas vendo imagens de uma pasta, você poderia listar as imagens em um array no Javascript, e criar uma variável que gere um valor randômico de acordo com a quantidade de imagens, e esse valor iria puxar o item específico, por exemplo:

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

Ai você chamaria a imagem da seguinte forma:

imagens[j - 1]

Coloquei -1 por que o J iria gerar valores entre 1 e a quantidade de itens,porém as chaves do array são de 0 a quantidade de itens-1.

Dessa forma, sempre que a página for recarregada o script será re-executado, com isso, irá sempre exibir uma imagem diferente (ou não, é aleatório, então é possível repetir duas ou mais vezes a mesma imagem).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .