Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img844.imageshack.us/img844/9919/zqn3.jpg&key=e8d85d79eb94407571582982bc930cbff5d1ddfb0661fb603c7ea86b7dec7cfb" alt="zqn3.jpg" />
Quem quiser fazer o download dos arquivos prontos: CLICK AQUI
Abraços a todos.
bom... aqui outro exemplolegal também
Oi Xanburzum! com esse da para configurar tudo! Obrigado
/applications/core/interface/imageproxy/imageproxy.php?img=https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash3/t1/76286_671770966200036_1150471179_n.jpg&key=afb83ecc4b0aa52719e894d82f9f868f1d37d027cf8041554cff0c552e378782" alt="76286_671770966200036_1150471179_n.jpg" />
Boa tarde! X@nBuRzUm%. Agora apareceu mais uma dificuldade, acima desse banner (Choco-Slider-master) está o meu menu (CSS tipo sabfona que desce ao passar o mouse), o banner se sobrepõe ao menu. Quando carregado pela primeira vez o menu aparece, porém ao trocar a imagem do banner o menu fica para baixo e some. Tem como resolver? Obrigado.
Conssegui resolver com o z-index:. Obrigado pela ajuda!!!!
Cara tô com uma dúvida enorme.
Onde eu coloco essa pasta com as imagens?
Dentro do site, ou no desktop do meu pc?
Quando eu coloco o banner no site as imagens não aparecem.
Obrigado.
Boa tarde cadmooliveira! A pasta que contém as imagens (banner_img) bem como os arquivos (banner.css e banner.js) teem que estar no mesmo diretório que o seu html (banner.html). Seja local (desktop) ou no seu ftp (site). Espero te ajudar.
Lookmen, que diretório? É que não sou muito bom em linguagem de programação.
Oi cadmooliveira, os arquivos teem que estar juntos na mesma pasta para que funcione seja no seu computador ou seja no ftp.
Isso não é programação.
Ok, Obrigado.
Bacana mesmo _M!kol_
Li copiei os arquivos e alterei para a minha necessidade e em 10 min já estava funcionando
vou repassar este excelente tutorial,
Parabens
Ajuda como e onde eu coloco um link para cada imagem abrir uma pagina em outra aba do navegador
Bom dia
Gostaria de uma ajuda, tenho o banner rotativo funcionando. mas também na pagina estou querendo colocar o lightbox para abrir a imagens
do site, so que ao declarar os as tags os scrips do banner fica tudo errado não funciona ele se desagrupa.
os dois projetos separados tenho funcionando , mas se eu junto um deles deixa de funciona quando declara as tags <script>
alguém poderia me ajudar?
Obrigado
Legal, gostei do tutorial, mas como posso linkar uma das imagens?
obrigado amigo to a muito tempo procurando algo assim.
eu tenho que mexer no html
Eu botei o html la no meu site e nao apareceu as imagens,eu coloco so as imagens ou so o Html?
meu site e intersispire a plataforma
Eu tenho que alterar o Html
Oi! Parabéns pelo seu trabalho.
Eu sou leiga em JavaScript, mas personalizo alguns layouts para Blogger gratuitamente e disponibilizo com uma pequena propaganda (banner do meu blog) no rodapé. Eu queria muito saber adicionar um banner no rodapé desses layouts, com um código em que o banner pudesse ser alterado remotamente por mim quando preciso. Sei que isso é possível, mas não encontro ninguém ensinando. Você poderia me ajudar?
Abraço!
Esse tutorial tem um probleminha no temporizador que não estou conseguindo resolver.
O setInterval define 3 segundos pra chamar o método -- setInterval("mudaImg()", 3000); --
Se uma imagem já está rodando a 2 segundos e eu clico em outra imagem, essa imagem clicada fica só 1 segundo que é o tempo restante dos 3 segundos.
Isso porque o evento -- onclick="mudaImg('2');" -- chama direto a função sem resetar o tempo do setInterval.
Tentei resolver isso de 2 maneiras, mas nenhuma funcionou:
A primeira foi colocar o setInterval dentro do onclik -- onclick="setInterval('mudaImg('2')', 3000); "
Deu errado.
a segunda foi fazer uma função chamando o setInterval novamente:
function chamalink(j){
setInterval("mudaImg(j)", 3000);
}
onclick="chamalink('2');"
Deu errado também.
Alguém tem uma solução?Consegui resolver o problema do temporizador usando o setTime out dentro de um loop.
Acrescentei também uma barra de progresso e um menu de navegação.
Acho que deu tudo certo.
Vejam o código:
<body onload="start();">
<div id="noticias">
Notícias
<div id="_1"></div>
<div id="_2"></div>
<div id="_3"></div>
<div id="_4"></div>
<div id="capa_barra_de_progresso">
<div id="barra_de_progresso"></div>
</div>
<div id="capa_menu_noticias">
<input class="btnoticias" id="btn1" type="button" value="1" onclick="chama1()" />
<input class="btnoticias" id="btn2" type="button" value="2" onclick="chama2()" />
<input class="btnoticias" id="btn3" type="button" value="3" onclick="chama3()" />
<input class="btnoticias" id="btn4" type="button" value="4" onclick="chama4()" />
</div>
</div> <!--Fecha a div noticias-->
<style type="text/css">
#noticias {
width:564px;
height:280px;
float:left;
margin-top:20px;
margin-left:20px;
font-size:20px;
}
.btnoticias {
border-radius:15px;
background:#B20000;
width:30px;
height:30px;
border:solid 2px #000000;
color:#FFF;
}
.btnoticias:hover {
background:#FFBFBF;
}
#btn1 {
border: solid 2px #007FFF;
}
#capa_barra_de_progresso {
width:540px;
margin:auto;
text-align:center;
padding-top:2px;
padding-bottom:2px;
height:7px;
}
#barra_de_progresso {
height:3px;
background:#000;
margin-bottom:2px;
float:left;
}
#capa_menu_noticias {
width:540px;
margin:auto;
text-align:center;
padding-top:2px;
padding-bottom:2px;
}
#_1 {
width:540px;
margin:auto;
margin-top:5px;
height:200px;
visibility:visible;
background:#090;
}
#_2 {
width:540px;
margin:auto;
height:0px;
visibility:hidden;
background:#FF0;
}
#_3 {
width:540px;
margin:auto;
height:0px;
visibility:hidden;
background:#06F;
}
#_4 {
width:540px;
margin:auto;
height:0px;
visibility:hidden;
background:#900;
}
</style>
<script type="text/javascript">
var progresso = new Number();
var maximo = new Number();
var progresso = 0;
var maximo = 540;
var i = 1;
function start(){
if(i < 4) {
if((progresso + 1) <= maximo){
progresso = progresso + 1;
document.getElementById("barra_de_progresso").style.width = progresso+"px";
setTimeout("start();", 15);
} else {
i++;
progresso = 0;
maximo = 540;
document.getElementById("_1").style.height = "0px";
document.getElementById("_1").style.visibility = "hidden";
document.getElementById("_1").style.marginTop = "0px";
document.getElementById("btn1").style.border = "solid 2px #000000";
document.getElementById("_2").style.height = "0px";
document.getElementById("_2").style.visibility = "hidden";
document.getElementById("_2").style.marginTop = "0px";
document.getElementById("btn2").style.border = "solid 2px #000000";
document.getElementById("_3").style.height = "0px";
document.getElementById("_3").style.visibility = "hidden";
document.getElementById("_3").style.marginTop = "0px";
document.getElementById("btn3").style.border = "solid 2px #000000";
document.getElementById("_4").style.height = "0px";
document.getElementById("_4").style.visibility = "hidden";
document.getElementById("_4").style.marginTop = "0px";
document.getElementById("btn4").style.border = "solid 2px #000000";
document.getElementById("_"+i).style.height = "200px";
document.getElementById("_"+i).style.visibility = "visible";
document.getElementById("_"+i).style.marginTop = "5px";
document.getElementById("btn"+i).style.border = "solid 2px #007FFF";
start();
} //fecha o else do if((progresso + 1) <= maximo)
} else {
i = 0;
start();
}
}
function chama1(){
progresso = 540;
i = 0;
}
function chama2(){
progresso = 540;
i = 1;
}
function chama3(){
progresso = 540;
i = 2;
}
function chama4(){
progresso = 540;
i = 3;
}
</script>
</body>
Excelente tutorial! Parabéns.
Como faço para colocar links nas imagens?
Obrigado!!!!