Exibição Dinâmica de Banners

[Schuindt 0]

Olá pessoal,

 

Primeiro queria dizer que eu sou novato aqui no iMasters, caso eu esteja fazendo algo errado peço que me digam e me desculpem desde já. :)

 

Mas vamos ao que interessa...

 

Eu trabalho com desenvolvimento Web em um estúdio de publicidade, mas a minha área mesmo é programação grossa (PHP e Banco de dados).

Manjo muito pouco de client-side e de design...

 

Um pouco de HTML, CSS, Photoshop, etc...

 

Mas eu recebi uma missão diferente, e acho que ela envolve JavaScript (ou então Flash o.o).

 

O negócio é o seguinte, eu não sei se algum de vocês já viram esses banners de site, que tipo, ele fica com duas setinhas na extremidade...

Uma pra < e outra pra >.

 

Quando o usuário passa o mouse em cima de uma dessas setinhas, automaticamente aparece outro banner deslizando...

No caso: banner1, banner2, banner3 e banner4.

 

Eles ficariam mudando com uma frequência X, mas caso o usuário quisesse passar pra outro, era só colocar o mouse em uma das setinhas.

 

Provavelmente vocês já devem ter visto.

 

 

- Então, existe algum script desses já pronto?

- Isso é JavaScript mesmo?

 

Existe um modo fácil de fazer?

 

 

*Lembrando que eu sou um horrível em JS*

 

 

 

Desculpa aí qualquer coisa...

Grato desde já. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[augustoclaro 2]

Dá pra fazer em JS sim mais seria muito complicado, isso é feito em flash.

 

Se você realmente precisar disso em javascript, me aviza que eu tento fazer pra vce e posto aqui.

[Schuindt 0]

@augustoclaro:

 

Opa, olha só, o ideal mesmo seria em JS :x

Se você poder fazer, cara, se não for incômodo e talz, eu ficaria muito grato :)

 

Eu até poderia dar uma olhada no código depois e me virar em alguma mudança *se necessária*.

 

Mas enfim, valeu por responder :D

 

Té mais.

[Henrique Barcelos 290]

Não é tão complicado assim...

 

Tenho um sistema aqui que é parecido, só precisa adaptar:

 

/** ================================= Mecanismo das Manchetes ==================================== **/

var atual = 1;
var rotacionar;

function ativarManchetes(){
	var player = document.getElementById("player");
	if (!player) {
		stop();
		return false;
	}
	var manchetes = player.getElementsByTagName("a");
	
	start();
	rotacionar = setInterval(start, 5000);
	
	var btPlay = document.getElementById("btPlay");
	var btPause = document.getElementById("btPause");
	
	btPlay.onclick = play;
	btPause.onclick = pause;
	
	for (var i = 0; i < (manchetes.length - 2); i++) {
		manchetes[i].onclick = function(){
			for (var n = 0; n < manchetes.length; n++) {
				manchetes[n].className = "";
			}
			
			var x = this.id.substr(8, 1);
			mostrarManchete(x);
			this.className = "selecionado";
			atual = x;
			pause();
			return false;
		}
	}
	
}

function start(){
	if (atual == 6) atual = 1;
	passaManchete(atual);
	atual++;
}

function play(){
	if (rotacionar == 0) {
		start();
		rotacionar = setInterval(start, 5000);
	}
	return false;
}

function pause(){
	clearInterval(rotacionar);
	rotacionar = 0;
	return false;
}

function stop(){
	if (rotacionar != 0) {
		clearInterval(rotacionar);
		rotacionar = 0;
	}
}

//essa função aqui você provavelmente vai ter que alterar
function passaManchete(i){
	var player = document.getElementById("player");
	if (!player) {
		stop();
		return false;
	}
	
	var manchetes = player.getElementsByTagName("a");
	
	for (var n = 0; n < manchetes.length; n++) {
		manchetes[n].className = "";
	}
	var id = "manchete" + i.toString();
	var link = document.getElementById(id);
	mostrarManchete(i);
	link.className = "selecionado";
}

function mostrarManchete(num){
	var img = document.getElementById("imgManchete");
	var array_imagens = new Array();
	array_imagens[1] = "manchetes/1.gif";
	array_imagens[2] = "manchetes/2.gif";
	array_imagens[3] = "manchetes/3.gif";
	array_imagens[4] = "manchetes/4.gif";
	array_imagens[5] = "manchetes/5.gif";
	
	img.src = array_imagens[num];
}

/** ================================= Fim Mecanismo das Manchetes ==================================== **/