Skip to content

Instantly share code, notes, and snippets.

@folksilva

folksilva/banners.json

Created July 4, 2012 18:30
Show Gist options
  • Save folksilva/3048785 to your computer and use it in GitHub Desktop.
Save folksilva/3048785 to your computer and use it in GitHub Desktop.
Download ZIP
JQuery Banner example
Raw
banners.json
[{
"nome": "banner01",
"titulo": "Banner #01"
},
"nome": "banner02",
"titulo": "Banner #02"
},
"nome": "banner03",
"titulo": "Banner #03"
},
"nome": "banner04",
"titulo": "Banner #04"
},
"nome": "banner05",
"titulo": "Banner #05"
},
"nome": "banner06",
"titulo": "Banner #06"
},
"nome": "banner07",
"titulo": "Banner #07"
},
"nome": "banner08",
"titulo": "Banner #08"
},
"nome": "banner09",
"titulo": "Banner #09"
},
"nome": "banner10",
"titulo": "Banner #10"
}]
Raw
jquerybanner.html
<html>
<head>
<!-- Importar o jquery e outros cabeçalhos da sua página -->
<style>
/* Supondo que os banners são PNGs na pasta /caminho/para/os/banners e possuem 300x200px */
.banner {
display:inline-block;
width: 300px;
height: 200px;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div align="center"><div class="banner"></div><div id="titulo"></div></div>
<script>
/**
* Aqui vou importar um JSON com todos os banners.
* O arquivo está nesse formato:
* [{'nome':'banner01','titulo':'Banner #1'},{'nome':'banner02','titulo':'Banner #2'}]
**/
var banners = null;
$.getJSON("banners.json",function(data){banners = data;});
// Essa função exibe o banner no indice i
function showBanner(i){
$("div.banner").fadeOut(function(){
$("div.banner").css("background-image","/caminho/para/os/banners/" + banners[i].nome + ".png");
$("div#titulo").html(banners[i].titulo);
$("div.banner").fadeIn();
});
}
// Isso faz o banners rodarem constantemente a cada 3 segundos (3000 ms)
var i = 0;
setInterval(function(){
i++;
if ( i == banners.length ) i = 0; // Se exibiu todos os banners, volta ao primeiro
showBanner(i);
},3000);
// Mostrar o primeiro banner
showBanner(i);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment