Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

tastan

Script SlidShow em Java ou Ajax

Por , em Javascript

Recommended Posts

tastan    0

tastan
Postado

Boa Tarde a todos.

Alguem ae saberia me dizer onde eu encontro um script pronto ou um tutorial para criar um script de SlidShow para Website.

O unico site que eu encontrei que tem esse sistema do modo que quero seria esse.

http://www.avenger.com.br/

Esse sistema no Inicio do site.

Des de ja agradeço a Todos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

eibon    2

eibon
Postado

Com js - jquery é bem simples.

No onMouseOver,checa quais imagems tem o display block,e da fadeOutNelas,depois,fadeIn na imagem que deseja ser mostrada;

Se não quiser usar o jquery,faz o mesmo,mas ao inves de dar o fade-in/out,checa a opacity dos elementos,se for 1.0 (depende do browser,fazer uma aplicação cross-browsing [assim que fala?]),vai mudando progressivamente até chegar em 0,e faz o mesmo com a imagem que quer mostrar (so que mudando até chegar em 1).

Expliquei mal pacas,então vamos aos codes:

<html>
<!--Requer jquery instalado-->
<script src="jquery-1.2.6.js"></script>
<script>
	$(document).ready(function(){
		$("#imagemzinha1").mouseover(function () {
		  if($("#imagemzona2").style.display = 'block'){
			  $("#imamgemzona2").fadeOut("slow");
		  } else {
			  $("#imamgemzona3").fadeOut("slow");
		  }
		  $("#imagemzona1").fadeIn("slow");
		});
		$("#imagemzinha2").mouseover(function () {
			if($("#imagemzona1").style.display = 'block'){
			  $("#imamgemzona1").fadeOut("slow");
			} else {
			  $("#imamgemzona3").fadeOut("slow");
			}
		  $("#imagemzona2").fadeIn("slow");
		});
		$("#imagemzinha3").mouseover(function () {
			if($("#imagemzona1").style.display = 'block'){
			  $("#imamgemzona1").fadeOut("slow");
			} else {
			  $("#imamgemzona2").fadeOut("slow");
			}	
		  $("#imagemzona3").fadeIn("slow");
		});
	});
</script>
<style>
	<!--Alterar o estilo das divs a seu gosto-->
	<!--As divs das imagens grandes devem ter o display none-->
</style>
<body>
	<div id="pai" style="border:3px solid #0000ff;">
		<div id="imagemzinha1"></div>
		<div id="imagemzinha2"></div>
		<div id="imagemzinha3"></div>
		<div id="imagemzona1"></div>
		<div id="imagemzona2"></div>
		<div id="imagemzona3"></div>
	</div>
</body>
</html>

Fiz pra você!

Agora é só personalizar.

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito