Banner rotativo (SIMPLES)

[_M!K0L_ 1]

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.

[lookmen 1]

Excelente tutorial! Parabéns.
Como faço para colocar links nas imagens?
Obrigado!!!!

[xanburzum 169]

bom... aqui outro exemplo legal também

[lookmen 1]

Oi Xanburzum! com esse da para configurar tudo! Obrigado

[xanburzum 169]

[lookmen 1]

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

[cadmooliveira 0]

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.

[lookmen 1]

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.

[cadmooliveira 0]

Lookmen, que diretório? É que não sou muito bom em linguagem de programação.

[lookmen 1]

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.

[cadmooliveira 0]

Ok, Obrigado.

[HumbertoJunior 0]

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

[asas1976 0]

Ajuda como e onde eu coloco um link para cada imagem abrir uma pagina em outra aba do navegador

[walterfoliveira 0]

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

[fernandojunior 0]

Legal, gostei do tutorial, mas como posso linkar uma das imagens?

[marlos trinidad 0]

obrigado amigo to a muito tempo procurando algo assim.

[jlaughton 0]

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?

 

[jlaughton 0]

meu site e intersispire a plataforma

 

[jlaughton 0]

Eu tenho que alterar o Html

[CamillaKleemann 0]

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!