Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 114
Sexo: Masculino
Localização: Vitória/ES - Brazil
Contato:

script de imagens rotativas com fade jQuery

21-09-2009 10:01

Olá Web

Gostaria que você me ajudasse na implementação de um script usando as bibliotecas jQuery como nesse exemplo que vc me passou. Acho que o script não será muito diferente.

<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.timer.js"></script> <script type="text/javascript"> <!-- var bannerTexts = new Array(); bannerTexts[0] = 'Java'; bannerTexts[1] = 'JPA'; bannerTexts[2] = 'Maven'; var i = 0; $.timer(5000, function (timer) { if (i == bannerTexts.length) { i = 0; } $('#banner').fadeTo(1000, 0, function() { $(this).html(bannerTexts[i]); }).fadeTo(1000,1, function() { i++; }); }); --> </script> </head> <body> <div style="border: 1px solid black; margin: auto; width: 200px; height: 50px; text-align: center;"> <div id="banner" style="font-size: 40px;">Tomcat</div> </div> </body> </html>

É mais ou menos assim:

Passo 1: Carrega a div vazia;
Passo 2: Carrega a imagem 1 com efeito fadein;
Passo 3: Carrega a imagem 2 com efeito fadein e a imagem 1 pemanece;
Passo 4: Carrega a imagem 3 com efeito fadein e as imagens 1 e 2 parmanecem;
Passo 5: Carrega quantas imagens forem, permanecendo as outras;
Passo 6: Apaga TUDo com efeito fadeout e reinicia o processo.


Tentei ilustrar o fluxograma:

Imagem

Pode me dar uma base que vou futucando, ok?

Obrigado
0
Rodrigo Borges
" A verdadeira função do professor é criar condições para que o aluno aprenda sozinho. (...)
Ensinar de fato não é passar conhecimento, mas estimular o aluno a buscá-lo.
Poderíamos até dizer que ensina melhor quem menos ensina." John Milton Gregory
http://www.universodaeletricidade.com
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17385
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

script de imagens rotativas com fade jQuery

21-09-2009 11:00

Seria um loop, segue ai uma base

<script type="text/javascript" language="JavaScript"> $(document).ready(function() { function runIt() { setTimeout(function(){ $("#base").fadeIn("slow", function () {}); }, 2000); setTimeout(function(){ $("#base").fadeOut("slow", function () {}); }, 4000); setTimeout(function(){ runIt(); }, 6000); } runIt(); }); </script> <div id="base" style="display:none;">base</div>

0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 114
Sexo: Masculino
Localização: Vitória/ES - Brazil
Contato:

script de imagens rotativas com fade jQuery

30-09-2009 10:04

Olá Web

Estou fazendo o código e até que está dando certo. Porém está acontecendo um pequeno bug.

Quando abro a página "pela primeira vez" em um navegador as imagens demoram um pouco para carregar e não fazem o efeito do fade. Depois de carregadas todas as imagens em um loop completo aí sim os efeitos de uma imagem para outra ficam normais.

Existe uma forma de carregar essas imagens no cache do navegador, junto com o carregamento da página mas antes de iniciarem os efeitos de fadein e fadeout?

Valew

Rodrigo
0
Rodrigo Borges
" A verdadeira função do professor é criar condições para que o aluno aprenda sozinho. (...)
Ensinar de fato não é passar conhecimento, mas estimular o aluno a buscá-lo.
Poderíamos até dizer que ensina melhor quem menos ensina." John Milton Gregory
http://www.universodaeletricidade.com
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17385
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

script de imagens rotativas com fade jQuery

30-09-2009 10:27

0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 114
Sexo: Masculino
Localização: Vitória/ES - Brazil
Contato:

script de imagens rotativas com fade jQuery

05-10-2009 21:04

Ainda não tive tempo de testar o código, por isso deixei o tópico em aberto.

Acho, sinceramente, que a advertência foi uma atitude extremada. :?

Atenciosamente

Rodrigo Borges
0
Rodrigo Borges
" A verdadeira função do professor é criar condições para que o aluno aprenda sozinho. (...)
Ensinar de fato não é passar conhecimento, mas estimular o aluno a buscá-lo.
Poderíamos até dizer que ensina melhor quem menos ensina." John Milton Gregory
http://www.universodaeletricidade.com
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 114
Sexo: Masculino
Localização: Vitória/ES - Brazil
Contato:

script de imagens rotativas com fade jQuery

05-10-2009 21:41

...continuando o assunto do tópico...

Coloquei o código em questão em meu html dessa maneira, após o cabeçalho:

<script language="JavaScript"> function cache() { imagens = new Image(); imagens.src='imagens/fade1.jpg'; imagens.src='imagens/fade2.jpg'; imagens.src='imagens/fade3.jpg'; imagens.src='imagens/fade4.jpg'; imagens.src='imagens/fade5.jpg'; } </script> <body onload="cache()">

O resultado não foi o esperado. Pode-se notar na página de testes: http://www.universodaeletricidade.com/teste/

Segue abaixo o script do efeito de FADE usando as bibliotecas jQuery:

<script type="text/javascript"> <!-- var bannerTexts = new Array(); bannerTexts[0] = '<a href="http://www.cecates.com.br/" target="_blank"><img src="imagens/fade1.jpg" width=400 height=160 border=0 title="Conheça o CECATES"></a>'; bannerTexts[1] = '<a href="http://www.cecates.com.br/" target="_blank"><img src="imagens/fade2.jpg" width=400 height=160 border=0 title="Conheça o CECATES"></a>'; bannerTexts[2] = '<a href="http://www.cecates.com.br/" target="_blank"><img src="imagens/fade3.jpg" width=400 height=160 border=0 title="Conheça o CECATES"></a>'; bannerTexts[3] = '<a href="http://www.cecates.com.br/" target="_blank"><img src="imagens/fade4.jpg" width=400 height=160 border=0 title="Conheça o CECATES"></a>'; bannerTexts[4] = '<a href="http://www.cecates.com.br/" target="_blank"><img src="imagens/fade5.jpg" width=400 height=160 border=0 title="Conheça o CECATES"></a>'; var i = 0; $.timer(5000, function (timer) { //ajusta o tempo de presenca em milesegundos if (i == bannerTexts.length) { i = 0; } $('#banner').fadeTo(1000, 0, //ajusta o tempo de fadout em milesegundos function() { $(this).html(bannerTexts[i]); }).fadeTo(1000,1, //ajusta o tempo de fadin em milesegundos function() { i++; }); }); --> </script> <div style="margin: auto; width: 400px; height: 160px;"> <div id="banner"> <p style="margin-left: 35"><img src="imagens/fade5.jpg" width=400 height=160 border=0> </div> </div>

O que será que pode estar acontecendo de errado??

valew :-)
0
Rodrigo Borges
" A verdadeira função do professor é criar condições para que o aluno aprenda sozinho. (...)
Ensinar de fato não é passar conhecimento, mas estimular o aluno a buscá-lo.
Poderíamos até dizer que ensina melhor quem menos ensina." John Milton Gregory
http://www.universodaeletricidade.com
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17385
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

script de imagens rotativas com fade jQuery

05-10-2009 22:00

O cache geralmente é usado dentro da tag head, logo após abrir a tag. No seu HTML, você abre e fecha a tag head, após isso que você carrega o script do cache, antes do body, ou seja, praticamente é a última coisa a ser lida.
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 114
Sexo: Masculino
Localização: Vitória/ES - Brazil
Contato:

script de imagens rotativas com fade jQuery

05-10-2009 23:06

num sei se as imagens estão indo pro cache naum!!

olha como coloquei agora:

<html> <head> <script language="JavaScript"> function cache() { imagens = new Image(); imagens.src='imagens/fade1.jpg'; imagens.src='imagens/fade2.jpg'; imagens.src='imagens/fade3.jpg'; imagens.src='imagens/fade4.jpg'; imagens.src='imagens/fade5.jpg'; } </script> <meta http-equiv="Content-Language" content="pt-br"> <link rel="shortcut icon" href="http://www.universodaeletricidade.com/favicon.ico" type="image/x-icon" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <title>CECATES - Centro de Capacitação e Aperfeiçoamento Técnico do Espírito Santo</title> <meta name="ProgId" content="FrontPage.Editor.Document"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.timer.js"></script> <STYLE type="text/css"> <!-- a:link {text-decoration: none;color: #3A9CCD} .fonte { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12 pt; color: #000000 } a:active {text-decoration: none;} a:visited {text-decoration: none;color: #3A9CCD} a:hover {text-decoration: underline;color: #3A9CCD} .form { font-family: Verdana; font-size: 10px; background-color: #F5F5F5 } .datahora { color: #494949; font-size: 8 pt; font-family: Verdana, Arial, Helvetica, sans-serif } .bordaBox {bbackground: ttransparent; width:30%;} .bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b4, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b, .bordaBox .b4b {display:block; overflow:hidden; font-size:1px;} .bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b {height:1px;} .bordaBox .b2, .bordaBox .b3, .bordaBox .b4 {background:#000000; border-left:1px solid #999; border-right:1px solid #999;} .bordaBox .b1 {margin:0 5px; background:#999;} .bordaBox .b2 {margin:0 3px; border-width:0 2px;} .bordaBox .b3 {margin:0 2px;} .bordaBox .b4 {height:2px; margin:0 1px;} .bordaBox .conteudo {padding:5px;display:block; background:#000000; border-left:1px solid #999; border-right:1px solid #999;} --> </STYLE> <script LANGUAGE="JAVASCRIPT"> <!-- function openform(url) { var url = url + "?url=" + document.location var NS = (document.layers) ? true : false; var IE = (document.all) ? true : false; if(NS) { window.open(url,"","scrollbars=no,menubar=no,personalbar=no,width=500,height=310,screenX=220,screenY=0"); } else if(IE) { window.open(url,"","scrollbars=no,menubar=no,personalbar=no,width=500,height=280,left=220,top=0"); } } //--> </script> <base target="principal"> </head> <body onload="cache(); document.indique.reset(); document.novidades.reset();">

Num ta bom não. Dê uma olhada: http://www.cecates.com.br/teste/

num esquece de limpar o cache antes...
0
Rodrigo Borges
" A verdadeira função do professor é criar condições para que o aluno aprenda sozinho. (...)
Ensinar de fato não é passar conhecimento, mas estimular o aluno a buscá-lo.
Poderíamos até dizer que ensina melhor quem menos ensina." John Milton Gregory
http://www.universodaeletricidade.com
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17385
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

script de imagens rotativas com fade jQuery

06-10-2009 08:31

Realmente demora um pouco. Não sei se você já vai ter essa página ai como principal do site, mas, uma alternativa seria você carregar as imagens antes no navegador do usuário de modo oculto. Por iframe ou carregar as imagens em uma div display none. Só para já deixar em cache antes de chegar a esse documento.
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 114
Sexo: Masculino
Localização: Vitória/ES - Brazil
Contato:

script de imagens rotativas com fade jQuery

06-10-2009 09:29

entendi!
Mas sendo esta a pagina inicial, existe uma outra solução alternativa?
0
Rodrigo Borges
" A verdadeira função do professor é criar condições para que o aluno aprenda sozinho. (...)
Ensinar de fato não é passar conhecimento, mas estimular o aluno a buscá-lo.
Poderíamos até dizer que ensina melhor quem menos ensina." John Milton Gregory
http://www.universodaeletricidade.com
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17385
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

script de imagens rotativas com fade jQuery

06-10-2009 09:41

Você pode tentar o que indiquei, logo depois de carregar o body, você cria uma div oculta para carregar essas imagens, através do img src. Com o carregamento do documento, elas já vão para o cache, sendo assim, quando chegar a hora do script rodar, elas já estão armazenadas.
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 114
Sexo: Masculino
Localização: Vitória/ES - Brazil
Contato:

script de imagens rotativas com fade jQuery

06-10-2009 10:19

saquei!!
Você pode me dar uma base dessa DIV oculta?

Uma dúvida: usando essa DIV eu posso retirar o script que envia as imagens para o cache não é?

falow
0
Rodrigo Borges
" A verdadeira função do professor é criar condições para que o aluno aprenda sozinho. (...)
Ensinar de fato não é passar conhecimento, mas estimular o aluno a buscá-lo.
Poderíamos até dizer que ensina melhor quem menos ensina." John Milton Gregory
http://www.universodaeletricidade.com
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17385
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

script de imagens rotativas com fade jQuery

06-10-2009 10:21

Isso.
A div seria com display none

<div style="display:none;">
<img src="...">
<img src="...">
<img src="...">
</div>
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 114
Sexo: Masculino
Localização: Vitória/ES - Brazil
Contato:

script de imagens rotativas com fade jQuery

06-10-2009 16:09

Parece que agora ficou bom... :mrgreen

Se for possível, da uma olhada e me fala.

valew
0
Rodrigo Borges
" A verdadeira função do professor é criar condições para que o aluno aprenda sozinho. (...)
Ensinar de fato não é passar conhecimento, mas estimular o aluno a buscá-lo.
Poderíamos até dizer que ensina melhor quem menos ensina." John Milton Gregory
http://www.universodaeletricidade.com
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17385
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

script de imagens rotativas com fade jQuery

06-10-2009 16:14

Sim, agora ficou certinho :)
0
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado