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.
-
@cigano-morrison-mendez pode me dar uma luz?– Steve AngelloCommented 12/08/2015 às 17:20
3 Respostas
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;
}
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/
-
-
@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.– SergioCommented 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– SergioCommented 13/08/2015 às 17:53
-
1isso 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
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).