Ir para conteúdo

Arquivado

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

klonder

SlideShow com botões de comando

Recommended Posts

Olá pessoal!

 

Vou postar abaixo um código muito interessante: um SlideShow muito semelhante ao do site do UOL. Para não ficar exatamente igual, tive de alterar alguns estilos e efeitos (a intenção é mostrar um método de criação, e não plagiar algo existente). http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Se você conseguir entender como tudo funciona, será capaz de criar slidesShows exatamente iguais a quaisquer outros em Java Script. Eu vou mostrar o caminho, mas se você quiser plagiar, eu não terei nada a ver com isso!

 

Características do projeto:

1. Não há limite para imagens. Se você quiser criar 100 imagens, basta adicionar os arrays seguindo o modelo que está no código;

2. Testado no IE e FF;

3. Utiliza apenas JavaScript. Nada de JQuery, boboQuery, Mototools, Motosserra... nada disso! É JavaScript puro!

4. Código flexível para alteração de cores, tamanhos e outros estilos;

5. Possui botões de pausa, avanço e retrocesso de imagens;

6. Permite a inserção de links no texto que descreve a imagem/foto/notícia...

 

Vou postar o código todo em um único arquivo para facilitar a cópia e teste para os usuários inexperientes. Todavia, se você quiser quebrar em *.js, *.css, *.htm, sinta-se à vontade!

 

Para testar/copiar, basta copiar todo código abaixo e testar em seu editor HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.sSLIDE {
width:250px; 
}
td.sIMG {
padding:0px;
height:170px; vertical-align:top; text-align:center; 
}
td.sMSG {
height:60px; padding:0px;
border-top:#D7D7D7 1px solid; border-left:#D7D7D7 1px solid; border-right:#D7D7D7 2px solid; border-bottom:#D7D7D7 0px solid;
}
#imagem {width:250px; height:170px;}

#texto {
background-color:#F5F4EF; text-decoration:none;
height:100%; vertical-align:top;
padding-left:8px; padding-top:6px;
border-top:#FFFFFF 2px solid; border-left:#FFFFFF 2px solid; border-right:#FFFFFF 2px solid; border-bottom:#FFFFFF 0px solid;
}
#titulo {
color:#990000; font-family:tahoma,arial,verdana; font-size:11px; font-weight:bold;
}
#mensagem {
color:#000000; font-family:arial,verdana; font-size:13px; font-weight:bold;
}

td.sCONTROLE {background-color:#F5F4EF; text-align:center;
padding:3px;
border-top:#D7D7D7 0px solid; border-left:#D7D7D7 1px solid; border-right:#D7D7D7 2px solid; border-bottom:#D7D7D7 2px solid;
}
span.quadro_pagina {background-color:#FAFAFA; font-size:11px; font-family:tahoma,arial,verdana;
color:#555555; text-align:center; text-decoration:none; 
border-left:#DDDDDD 1px solid; border-top:#DDDDDD 1px solid;
border-right:#AAAAAA 1px solid; border-bottom:#AAAAAA 1px solid;
padding-top:3px; padding-right:5px; padding-bottom:3px; padding-left:5px;
}
a.link0 {outline:0; text-decoration:none;}
</style>

<script type="text/javascript">
/*
Script desenvolvido por: klonder (klonder@ymail.com)
Data de criação: 14/07/2009
Modelo referência: www.uol.com.br

Em caso de utilização, a fonte não precisa ser citada. No entanto, tenham respeito e não coloquem que o código é de sua autoria. A capacidade de respeitar o trabalho do outro mostra que tipo de indivíduo você realmente é.

Esse código foi postado em uma data que ficará armazenada no POST deste fórum com referência do autor original. Por favor, não postem em outros fóruns sem a permissão do autor.

Postagem exclusiva em: http://forum.imasters.com.br/index.php?showtopic=353709
*/

//---------------------------------------------------------------------
//Criando variáveis para controle (não precisa alterar):
var i = 0; var iFiltro = 0; var temporizador, tempEfeito; var img = new Array();var titulo = new Array();var msg = new Array();var link = new Array(); var textoCompleto = new Array();
//---------------------------------------------------------------------


//Defina o tempo de transição em milissegundos:
var tempoTransicao = 5000;

//Tamanho ideal para as imagens: 250 x 170 pixels;
//Para adicionar novas imagens/textos, basta seguir o padrão dos arrays abaixo:
img[0] = 'http://tbn1.google.com/images?q=tbn:Zy3V2-RTkDjHnM:http://www.metrofusion.xpg.com.br/imagens/natureza_1.jpg';
link[0]='http://h.imguol.com/0907/14lulap.jpg';
titulo[0]='0. Questão social'; msg[0]='Sem-tetos invadem Palácio do Planalto em busca de moradia.';

img[1] = 'http://tbn2.google.com/images?q=tbn:bhAq6mWU-fbZmM:http://www.brtrips.com.br/BT_EXCLUSIVE/berimbau/berimbau01.gif';
link[1]='http://h.imguol.com/0907/14titasp.jpg';
titulo[1]='1. Música'; msg[1]='Aprenda a afinar o seu berimbau favorito!';

img[2] = 'http://tbn1.google.com/images?q=tbn:oHEtwdnqtwriUM:http://www.noticiacompleta.com/wp-content/uploads/2009/03/barrichelo_formula-1.jpg';
link[2]='http://h.imguol.com/0907/ap14rubinhop.jpg';
titulo[2]='"2. O campeão!"'; msg[2]='Rubinho Barrichelo é campeão da <br>F-1 de 2009!';

img[3] = 'http://tbn2.google.com/images?q=tbn:9TbuZ4yfMamnZM:http://www1.istockphoto.com/file_thumbview_approve/4728982/2/istockphoto_4728982-sexy-blonde-fairy.jpg';
link[3]='http://h.imguol.com/0907/harry13b.jpg';
titulo[3]='"3. Dia das bruxas"'; msg[3]='Saiba como escolher a fantasia perfeita!';

img[4] = 'http://tbn0.google.com/images?q=tbn:HUO8_QzYdlPaNM:http://mauricius.files.wordpress.com/2007/03/89284029.jpg';
link[4]='http://h.imguol.com/0907/14martep.jpg';
titulo[4]='4. Java Script e programação'; msg[4]='Klonder, o melhor programador dos últimos 500 anos!';

//img[5] = '';
//link[5]='';
//titulo[5]=''; msg[5]='';


//Definindo a maneira como o texto será exibido na tela:
for (var iTextos = 0; iTextos < img.length; iTextos++) {
	textoCompleto[iTextos] = '<a href="'+link[iTextos]+'" class="link0"><span id="titulo">'+titulo[iTextos]+'</span><br><span id="mensagem">'+msg[iTextos]+'</span></a>';
}


//Função para exibir os slides
function slideShow() {
//Localizando os objetos no HTML:
var objImg = document.getElementById("imagem");
var objTexto = document.getElementById("texto");

	//Criando apenas um controle, caso o valor do id seja maior do que os slides:
	if (i >= img.length) {
		i = 0;
	}
	
	//Controle dos estilos, para FF e IE:	
	objImg.style.opacity = ".0";
	objImg.style.filter = "alpha(opacity=0)";
	//Imprimindo a imagen e textos na tela:
	objImg.src = img[i];
	objTexto.innerHTML = textoCompleto[i];

	//Chamando a função responsável pelos efeitos nos slides:
	efeito();
	//Aumentando o i de 1 em 1;
	i++;

//Criando um temporizador para ajustar o tempo de transição entre os slides:
temporizador = window.setTimeout('slideShow()',tempoTransicao);
}

//Função que gera o efeito de transição entre os slides
function efeito() {
var objImg = document.getElementById("imagem");
	//Controle para as várias possibilidades do i:
	if (iFiltro > 100) {
		clearInterval(tempEfeito);
		iFiltro = 0;
	}else{
	 valorOpacidade = iFiltro/100;
	 valorOpacidade = valorOpacidade.toString();
		objImg.style.opacity = valorOpacidade;
		objImg.style.filter = "alpha(opacity="+iFiltro+")";
		iFiltro+=10;
		tempEfeito = window.setTimeout('efeito()',70);
	}
}

//Controle dos botões: ANTERIOR, PAUSA e POSTERIOR:
function controle(c) {
	if (c == -1) {
		i-=2;
		clearInterval(temporizador);
		clearInterval(tempEfeito); iFiltro = 0;
		if (i<0) {i = img.length-1};
		slideShow();
	}
	if (c == 1) {
		clearInterval(temporizador);
		clearInterval(tempEfeito); iFiltro = 0;
		slideShow();
	}
	if (c == 0) {
		clearInterval(temporizador);
		clearInterval(tempEfeito); iFiltro = 0;
	}
}
</script>
</head>
<body>
<table class="sSLIDE"  cellspacing="0" cellpadding="0">
<tr>
	<td class="sIMG"><img src="http://h.imguol.com/0907/14lulap.jpg" id="imagem"></td>
</tr>
<tr>
	<td class="sMSG">
	<div id="texto"></div>
	</td>
</tr>
<tr>
	<td class="sCONTROLE">
	<div id="controle">
		<a href="javascript:controle(-1)" class="link0"><span class="quadro_pagina">« ANTERIOR</span></a>
		<a href="javascript:controle(0)" class="link0"><span class="quadro_pagina">||</span></a>
		<a href="javascript:controle(+1)" class="link0"><span class="quadro_pagina">PRÓXIMO »</span></a>
	</div>
	</td>
</tr>
</table>
</body>
</html>

Se algo estiver errado, por favor, postem o ocorrido para corrigirmos as falhas.

 

Abraços a todos!

Compartilhar este post


Link para o post
Compartilhar em outros sites

                <a href="java script:controle(-1)" class="link0"><span class="quadro_pagina">« ANTERIOR</span></a>
                <a href="java script:controle(0)" class="link0"><span class="quadro_pagina">||</span></a>
                <a href="java script:controle(+1)" class="link0"><span class="quadro_pagina">PRÓXIMO »</span></a>
Tá dando erro... não seria?

<a href="javascript:controle(-1)" class="link0"><span class="quadro_pagina">« ANTERIOR</span></a>
				<a href="javascript:controle(0)" class="link0"><span class="quadro_pagina">||</span></a>
				<a href="javascript:controle(+1)" class="link0"><span class="quadro_pagina">PRÓXIMO »</span></a>

Compartilhar este post


Link para o post
Compartilhar em outros sites

O código do fórum altera automaticamente "javascript" para "java script". O problema não é no código. Ocorreu na hora de enviar para o banco de dados do fórum.

 

Entretanto, muita gente ainda não sabe disso (embora o compilador muitas vezes mostre que esse é um "erro", sendo portanto muito fácil de corrigir).

 

Só que não custa nada repetir:

Para evitar erros, substituam no código que postei, o termo "java script" por "javascript".

Compartilhar este post


Link para o post
Compartilhar em outros sites

kkkkkkk... malz...

Compilador não! Quis dizer: Na hora de debbugar o código. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

 

valeu pela postagem de seu codigo de slide show... ajudou e muito...

 

poderem depois que eu copiei o codigo e coloquei em meu site... os slides nao começam mudando sozinhos... para que mudem automaticamente primeiro tenho que clicar em "proximo" para que ele possa mudar sozinho e comeca a partir da imagem "0"... e fica mudando do 0,1,2,3,4... automaticamente...

 

gostaria saber se podia me dar uma ajudar para que eu possa fazer com que ele desde o momento do carregamento da pagina... ele possa mudar sozinho.. isso e... sem a necessidade de dar o primeiro clique... e ja iniciar da imagem "0"?

Compartilhar este post


Link para o post
Compartilhar em outros sites

TERIA COMO VOCE ME AJUDAR A CRIAR UM SLIDE SHOW COMO O DESTE SITE:

http://www.minhalojaweb.com.br/loja/default.aspx?comando=exemplo4

 

GOSTARIA DE DEIXAR TAMBEM O SEGUINTE:

depois que eu copiei o codigo e coloquei em meu site... os slides nao começam mudando sozinhos... para que mudem automaticamente primeiro tenho que clicar em "proximo" para que ele possa mudar sozinho e comeca a partir da imagem "0"... e fica mudando do 0,1,2,3,4... automaticamente...

 

gostaria saber se podia me dar uma ajudar para que eu possa fazer com que ele desde o momento do carregamento da pagina... ele possa mudar sozinho.. isso e... sem a necessidade de dar o primeiro clique... e ja iniciar da imagem "0"?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tente deixar assim, antes da tag </script> na linha 164/165:

 

window.onload = slideShow;
</script>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Brother se você manjou de fazer esse com controle ainda, deve saber como fazer um assim...

 

Clique aqui

 

Até abri um tópico mas ninguém respondeu :(

 

Grato!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Seria mais fácil fazer isso em flash... ele já tem até o modelo pronto. Mas pra fazer isso em js é só pegar um setInterval e usar um fade de jquery. Se der edito aqui depois com o código completo, muito sono agora! ;x

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pessoal, por favor me desculpem... mas intenção do tópico é mostrar um ligeiro exemplo de como fazer um slideshow... eu tive que alterar propositalmente umas coisas aqui para não ficar igual, mas basta um ligeiro conhecimento em CSS para deixar perfeitamente igual ao do UOL.

 

A minha opção foi: não postar um código-pronto, pois isso não traz conhecimento. É apenas um exemplo de como a coisa funciona mais ou menos...

Eu poderia ter incluído uma função para aguardar o carregamento de todas as imagens que seriam utilizadas para elas não ficarem piscando, como eu já havia feito no tópico:

http://forum.imasters.com.br/index.php?/topic/354082-album-de-fotos/

 

Entretanto, esse não é o propósito, pois complicaria a compreensão e iria de encontro a minha intenção, que é simplificar!

 

Eu concordo que em flash seria muito mais fácil, além de atender ao quesito "crossbrowser". Na minha opinião, slideshows em flash são muito melhores do que em JavaScript. Se o desenvolvedor quiser, poderia fazer slideshows excelentes, que talvez dariam muito, muito mas muito trabalho se fossem feitos em JS.

 

Em flash esses efeitos fade-in e fade-out são algo natural, podendo ser aplicados em menos de 10 segundos (além de dezenas ou centenas de outros efeitos).

 

Resumindo:

1. Eu não vou postar um slideshow perfeitamente igual ao do UOL. Sinto muito mas não acho justo fazer isso, nem comigo, nem com os webmasters do UOL.

2. Em flash é muito mais fácil fazer qualquer slideshow do mundo! hehe!

3. Qualquer um, estudando JavaScript consegue fazer esse slideshow ou até outro melhor, como o do Yahoo! Por isso: estudar, estudar, estudar...

 

Abraços a todos!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Klonder,

Gostei muito desse slideshow e estou utilizando em um trabalho, onde inclusive deixei suas referências.

Agradeceria muito se pudesse verificar pra mim se teria alguma idéia do porque ocorre das imagens darem uma tremida na transição dos slides.

Isso ocorre só no primeiro carregamento .. pensei talvez por ser imagens grandes .. mas tentei diminuir e continuou da mesma forma.

O endereço pra você visualizar é este: http://www.kta.com.br/site2009-11/portfolio-residenciais.html

 

Sorry.., mas se puder me ajudar agradeço muito.

Abs ... Nancy

Compartilhar este post


Link para o post
Compartilhar em outros sites

O Slideshow é bom, mas além dos botões de comando tem como colocar as miniaturas das fotos abaixo e quando clicar em uma aparecer a foto no slide ?

Como fazer um link pra quando clicar na miniatura aparecer a foto no slideshow ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara eu não sei explicar, mas aqui não funcionou. Eu troquei apenas isso.

img[0] = 'img/banner0.jpg';
link[0]='img/banner0.jpg';
titulo[0]='0. Questão social'; msg[0]='Sem-tetos invadem Palácio do Planalto em busca de moradia.';
img[1] = 'img/banner1.jpg';
link[1]='img/banner1.jpg';
titulo[1]='1. Música'; msg[1]='Aprenda a afinar o seu berimbau favorito!';
img[2] = 'img/banner2.jpg';
link[2]='img/banner2.jpg';
titulo[2]='"2. O campeão!"'; msg[2]='Rubinho Barrichelo é campeão da <br>F-1 de 2009!';
img[3] = 'img/banner3.jpg';
link[3]='img/banner3.jpg';
titulo[3]='"3. Dia das bruxas"'; msg[3]='Saiba como escolher a fantasia perfeita!';
img[4] = 'img/banner4.jpg';
link[4]='img/banner4.jpg';
titulo[4]='4. Java Script e programação'; msg[4]='Klonder, o melhor programador dos últimos 500 anos!';
Como inserir as imagens ae?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá amigo, muito bom o seu código, poderia tirar uma dúvida

Teria como fazer com que ele já aparecesse a primeira imagem do javascript com os textos sem que precise que a pessoa

passe com o botão para ver a primeira imagem do javascript,

no lugar dessa primeira imagem ( <img src="http://h.imguol.com/0907/14lulap.jpg" id="imagem"> ) que ele mostra, ser logo

o primeiro vetor do javascript

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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