Jump to content
_M!K0L_

Banner rotativo (SIMPLES)

Recommended Posts

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:

 

zqn3.jpg

 

Quem quiser fazer o download dos arquivos prontos: CLICK AQUI

 

Abraços a todos.

  • +1 1

Share this post


Link to post
Share on other sites

bom... aqui outro exemplo legal também

Share this post


Link to post
Share on other sites

76286_671770966200036_1150471179_n.jpg

Share this post


Link to post
Share on other sites

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!!!!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.