_M!K0L_ 1 Denunciar post Postado Setembro 2, 2013 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. 1 Compartilhar este post Link para o post Compartilhar em outros sites
lookmen 1 Denunciar post Postado Fevereiro 2, 2014 Excelente tutorial! Parabéns.Como faço para colocar links nas imagens?Obrigado!!!! Compartilhar este post Link para o post Compartilhar em outros sites
xanburzum 169 Denunciar post Postado Fevereiro 2, 2014 bom... aqui outro exemplo legal também Compartilhar este post Link para o post Compartilhar em outros sites
lookmen 1 Denunciar post Postado Fevereiro 4, 2014 Oi Xanburzum! com esse da para configurar tudo! Obrigado Compartilhar este post Link para o post Compartilhar em outros sites
xanburzum 169 Denunciar post Postado Fevereiro 5, 2014 Compartilhar este post Link para o post Compartilhar em outros sites
lookmen 1 Denunciar post Postado Fevereiro 5, 2014 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!!!! Compartilhar este post Link para o post Compartilhar em outros sites
cadmooliveira 0 Denunciar post Postado Abril 3, 2014 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. Compartilhar este post Link para o post Compartilhar em outros sites
lookmen 1 Denunciar post Postado Abril 3, 2014 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. 1 Compartilhar este post Link para o post Compartilhar em outros sites
cadmooliveira 0 Denunciar post Postado Abril 3, 2014 Lookmen, que diretório? É que não sou muito bom em linguagem de programação. Compartilhar este post Link para o post Compartilhar em outros sites
lookmen 1 Denunciar post Postado Abril 4, 2014 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. Compartilhar este post Link para o post Compartilhar em outros sites
cadmooliveira 0 Denunciar post Postado Abril 4, 2014 Ok, Obrigado. Compartilhar este post Link para o post Compartilhar em outros sites
HumbertoJunior 0 Denunciar post Postado Abril 6, 2014 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 Compartilhar este post Link para o post Compartilhar em outros sites
asas1976 0 Denunciar post Postado Maio 29, 2014 Ajuda como e onde eu coloco um link para cada imagem abrir uma pagina em outra aba do navegador Compartilhar este post Link para o post Compartilhar em outros sites
walterfoliveira 0 Denunciar post Postado Setembro 4, 2014 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 Compartilhar este post Link para o post Compartilhar em outros sites
fernandojunior 0 Denunciar post Postado Abril 10, 2015 Legal, gostei do tutorial, mas como posso linkar uma das imagens? Compartilhar este post Link para o post Compartilhar em outros sites
marlos trinidad 0 Denunciar post Postado Dezembro 7, 2015 obrigado amigo to a muito tempo procurando algo assim. Compartilhar este post Link para o post Compartilhar em outros sites
jlaughton 0 Denunciar post Postado Dezembro 16, 2017 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? Compartilhar este post Link para o post Compartilhar em outros sites
jlaughton 0 Denunciar post Postado Dezembro 16, 2017 meu site e intersispire a plataforma Compartilhar este post Link para o post Compartilhar em outros sites
jlaughton 0 Denunciar post Postado Dezembro 16, 2017 Eu tenho que alterar o Html Compartilhar este post Link para o post Compartilhar em outros sites
CamillaKleemann 0 Denunciar post Postado Março 5, 2019 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! Compartilhar este post Link para o post Compartilhar em outros sites