Olá pessoal, faz tempo que não posto nada, estou fazendo um trabalhinho para uma empresa e criei este banner rotativo bem rápido para suprir as necessidades, temporariamente, que está funcionando perfeitamente.
Segue o código:
Banner.html
<link href="banner.css" rel="stylesheet" type="text/css" />
<script type="text/jscript" src="banner.js"></script>
<div id="banner" class="banner">
<div id="banner_img">
<img src="banner_img/1.jpg" width="900px" height="300px" border="0" alt="Banner">
</div>
<div id="botoes">
<a href="javascript:void(0);" id="banner_img_1" class="hover" onclick="mudaImg('0');">1</a>
<a href="javascript:void(0);" id="banner_img_2" onclick="mudaImg('1');">2</a>
<a href="javascript:void(0);" id="banner_img_3" onclick="mudaImg('2');">3</a>
<a href="javascript:void(0);" id="banner_img_4" onclick="mudaImg('3');">4</a>
</div>
</div>
Banner.css
@charset "utf-8";
/* CSS Document */
#banner #banner_img {
width: 900px;
height: 300px;
border: solid 3px #333;
}
#banner a {
border: solid 1px #333;
background-color: #F7F7F7;
padding: 5px;
text-decoration: none;
color: #000;
}
#banner a:hover {
border: solid 1px #333;
text-decoration: underline;
background-color: #333;
color: #FFF;
}
#banner a.hover {
background-color: #333;
color: #FFF;
}
#banner #botoes {
width: 900px;
text-align: right;
}
#banner #botoes {
padding-top: 5px;
}
Banner.js
img = new Array('1','2','3','4');
indice = 0;
setInterval("mudaImg()", 3000);
function mudaImg(i) {
if (i == 0 || i == 1 || i == 2 || i == 3) {
indice = i;
} else {
if (indice == img.length - 1) {
indice = 0;
} else {
indice++;
}
}
document.getElementById("banner_img_1").setAttribute("class", "");
document.getElementById("banner_img_2").setAttribute("class", "");
document.getElementById("banner_img_3").setAttribute("class", "");
document.getElementById("banner_img_4").setAttribute("class", "");
document.getElementById("banner_img_" + img[indice]).setAttribute("class", "hover");
document.getElementById("banner_img").innerHTML = "<img src='banner_img/"+ img[indice] +".jpg' width='900' height='300' border='0' alt='Banner'>";
}
Observações finais:
Coloquem todos os arquivos depois de criados em uma pasta só, e criem uma subpasta chamada "banner_img", dai é só colocar todas as imagens que querem que apareça no banner (no máximo 4), com os nomes de:
1.jpg
2.jpg
3.jpg
4.jpg
Tamanho das imagens, preferencialmente 900x300 ;)
O banner deve ficar assim:
Quem quiser fazer o download dos arquivos prontos: CLICK AQUI
Abraços a todos.
