Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

HQuintas

Pausa em rolar imagens

Recommended Posts

HQuintas

Boa noite

No código em baixo estou a rolar 2 imagens, mas em cada imagem quero fazer uma pausa de 2 segundos, mas não estou conseguindo, já pesquisei e alterei várias vezes mas sem sucesso. Preciso da vossa ajuda...obrigado

<!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=utf-8" />
<title>Mover</title>
<script type="text/javascript">
var i=-160;
var j=-320;
function pausa()
{
}

function move()
{
i++;
j++;
document.getElementById('img1').style.left = i + 'px';
document.getElementById('img2').style.left = j + 'px';

if (i==160){

i=-160;
// setTimeout(function(){pausa();}, 2000); //Fazer pausa de 2 segundos
}

if (j==160){

j=-160;
//Fazer pausa de 2 segundos

}

setTimeout("move()",20);

}
window.onload=function() {
move();
}
</script>

<style type="text/css">
#box
{
   width: 160px;
   height: 120px;
   position: relative;
   margin: 20px auto 0px auto;
   border: 5px outset #000;
   overflow: hidden;
}

.image
{
   position: absolute;
   z-index: 100;
}
</style>
</head>

<body onload="move();">
<div id="box">
<img alt="" class="image" id="img1" src="imagens/foto1.jpg" width="160px" height="120px"/>
<img alt="" class="image" id="img2" src="imagens/foto2.jpg" width="160px" height="120px"/>
</div>
</body>
</html>

Share this post


Link to post
Share on other sites
brunoais

usa isto:

setInterval(scrollLeft, 4000);
setTimeout(function (){setInterval(scrollRight, 4000)}, 2000);

Depois cria 2 funções. 1 para mover a "câmara" para a esquerda outra para mover a "câmara" para a direita. Assim deves conseguir o que queres. Em js não existe o conceito de sleep mas existe o postprone (setInterval e setTimeout).


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
brunoais

Boa tarde

Não estou conseguindo,

O que é que não funciona?

não tem por ai um exemplo prático onde possa ver?

n tenho

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
HQuintas

Não consegui implementar a funções.

Encontrei uma função "pausecomp" na net que resolveu o problema.

function pausecomp(millis)
{
var date = new Date();
var curDate = null;

do { curDate = new Date(); }
while(curDate-date < millis);
} 

function move()
{
i++;
j++;
document.getElementById('img1').style.left = i + 'px';
document.getElementById('img2').style.left = j + 'px';

if (i==160){
	i=-160;
	//time=setTimeout("pausa()", 2000); //Fazer pausa de 2 segundos
	pausecomp(2000);
}

if (j==160){
	j=-160;
	pausecomp(2000);//Fazer pausa de 2 segundos
}

setTimeout("move()",10);


}

Share this post


Link to post
Share on other sites
brunoais

Busy wait é a pior coisa que alguma vez se pode fazer para esperar. Usa o que o js já tem. O setTimeout() e o setInterval()


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
HQuintas

Já agora porquê?

Já tentei de várias maneiras, mas consigo. Já fiz muitas pesquisas, mas nada...não percebo "nada" de javascript...

function move()
{	
i--;
j--;
document.getElementById('img1').style.left = i + 'px';
document.getElementById('img2').style.left = j + 'px';

if (i==-860){
	i=860;
	//time=setTimeout("pausa()", 2000); //Fazer pausa de 2 segundos
	//pausecomp(2000);

}

if (j==-860){
	j=860;
	//pausecomp(2000);//Fazer pausa de 2 segundos		

}

//setTimeout("move()",1);
setTimeout(function (){setInterval(move, 1000)}, 500);

}

A minha intenção é rolar várias imagens da direita para a esquerda, dentro de uma DIV, mas a cada imagem faça uma pausa.

Obrigado

Share this post


Link to post
Share on other sites
brunoais

Nota-se que não leste com atenção ao q escrevi.

Vou escreve aqui outra vez:

setInterval(scrollLeft, 4000);
setTimeout(function (){setInterval(scrollRight, 4000)}, 2000);

Isto escreve-se FORA DA FUNÇÕES QUE MOVEM A IMAGEM.

Precisas tb de 2 funções para mover as imagens. Uma move a(s) imagem(ns) para a esquerda e a outra move a(s) imagem(ns) para a direita. No meu exemplo o q trata de a(s) mover para a esquerda chama-se scrollLeft, o q trata de a(s) mover para a direita chama-se scrollRight.

O que tu fizeste não tem cabimento.

Esqueci-me disto:

Já agora porquê?

Porque enquanto o código de espera está a executar no browser do utilizador não está a executar.

Achas que alguém está com predisposição que o seu browser fique "impossivelmente" lento enquanto está numa página específica, não respondendo às minhas ordens de x em x tempo e parando? A 1ª coisa q faço logo é desligar o js na página q o provoca e talvês até sair dela para não voltar. O mesmo faço com páginas com flash. Ou consigo desligar o que está a acelerar o CPU ao (quase) máximo ou então saio da página para não voltar.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
HQuintas

Nota-se que não leste com atenção ao q escrevi.

Ler...li e com atenção, mas ainda não consegui por a funcionar.

Achas que alguém está com predisposição que o seu browser fique "impossivelmente" lento enquanto está numa página específica, não respondendo às minhas ordens de x em x tempo e parando? A 1ª coisa q faço logo é desligar o js na página q o provoca e talvês até sair dela para não voltar. O mesmo faço com páginas com flash. Ou consigo desligar o que está a acelerar o CPU ao (quase) máximo ou então saio da página para não voltar.

Tens razão, não é nada agradável.

Obrigado

Share this post


Link to post
Share on other sites
brunoais

Ler...li e com atenção, mas ainda não consegui por a funcionar.

Mostra o que tens. Posso ajudar-te a partir disso.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
HQuintas

Viva

Apenas tenho isto

var i=860;
var j=1720;

function move()
{
i--;
j--;
document.getElementById('img1').style.left = i + 'px';
document.getElementById('img2').style.left = j + 'px';

if (i==-860){
	i=860;
		//pausecomp(2000);		
}

if (j==-860){
	j=860;
	//pausecomp(2000);//Fazer pausa de 2 segundos
}

setTimeout("move()",2);


}

window.onload=function() {
move();
}

De momento está sempre a rodar as 2 imagens da direita para a esquerda, sem a pausa de 2 segundos.

Obrigado pela atenção

Share this post


Link to post
Share on other sites
brunoais

Já resolvi o problema. Vamos ver se percebes como resolver. Eu acabei por ver o que querias e afinal não era o que eu pensava, no entanto, testando, já sei o que queres.

Para resolver vamos aplicar as seguintes regras:

Uma função para cada o movimento de cada uma das imagens.

Aplicar recursão usando o setTimeout() para chamar a função a si mesma. Alterar o valor de espera para escolher a velocidade com que as imagens movem-se.

As imagens movem-se a partir do mesmo sítio, não existe uma imagem a iniciar o movimento à esquerda da outra (no teu caso a foto2 começa 160px à esquerda da foto1), ambas começam no mesmo sitio.

Não usar variáveis globais, usar parâmetros nas funções que irão mover as imagens.

A lógica por de traz:

Primeiro move-se uma imagem. Quando esta acaba de mover espera-se x tempo e depois move-se a outra imagem. Depois de x tempo move-se a outra imagem, depois de x tempo move-se a outra imagem, etc.....

Vamos então estudar a fazer. Vou mostrar o que fazer em fazes.

1ª faze. Separa essa função (move()) em 2 funções. Uma move a foto1 e outra move a foto2.

2ª Regista a função que move a foto1 para ser ativada quando o loading da página terminar (window.load = function(){move(-159)}), por exemplo.

Falo do resto quando acertares nisto (por isso, preciso do código que fizeres)

(se preferires, posso dar suporte remoto, fala por PM)


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
HQuintas

Ainda não consegui acertar com isto, também estou com dificuldade em  incrementar o valor passado pelo parâmetro, mais tarde digo alguma coisa...

var j=1720;
//var i=860;
function move_img1(valor1)
{
i=valor1--;
document.getElementById('img1').style.left = valor1 + 'px';	
if (valor1==-860){
	valor1=860;
}
setTimeout("move_img1(valor1)",2);	
}

function move_img2()
{
j--;
document.getElementById('img2').style.left = j + 'px';
if (j==-860){
	j=860;
	//setTimeout("move_img1()",2);
}
setTimeout("move_img2()",2);
}

window.onload=function() {move_img1(860);}

Share this post


Link to post
Share on other sites
brunoais

Começa +- :) .

i=valor1--;

Esquece o i. Usa diretamente o valor1.

Assim:

valor1--;

setTimeout("move_img1(valor1)",2);

tenta:

setTimeout("move_img1(" + valor1 +")",2);

Agora vê se com essas alterações a imagem1 já deve funcionar sem intervalo de espera(esquece a imagem 2, por agora).

Funciona?


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
HQuintas

Funciona, sim senhor

Mas realmente não entendi [glow=green,2,300]("+ valor1 +")[/glow] como funciona.

Share this post


Link to post
Share on other sites
brunoais

Funciona, sim senhor

Good. A próxima parte vem a seguir:

Mas realmente não entendi [glow=green,2,300]("+ valor1 +")[/glow] como funciona.

Isso são concatenação de strings.

Suponhamos que valor1 contém o valor 300. Desta maneira concatena-se as 3 strings:

move_img1(, valor1  e )

formando:

"move_img1(300)".

Isto não é uma solução muito apropriada (devia-se de usar uma melhor) mas tu ainda estás no inicio, desde q esteja certo para o que se quer e não se faça algo horrível (como o que tinhas com espera ativa) está, pelo menos, aceitável, o que é otimo para quem está a começar.

'Kay, fase seguinte:

Agora o objetivo ainda só se foca na imagem1. O objetivo é obrigar a imagem 1 n estar a aparecer a toda a hora mas aparecer com uma espera de 2 segundos.

Para resolver este problema precisamos de saber quando é que é suposto parar.

Suponha-se que queres que ele pare quando valor1 for 0 (depois adaptas para o teu problema). VAis rpecisar de dar uma ordem de paragem. Uma maneira de controlar isso é com um if. Quando valor1 == 0 ele tem de parar.

P:Como é que ele pára?

R:Não chamando o setTimeout().

P:Se não chamo o setTimeout()... como é que ele volta ao 0?

R:Chamando o setTimeout().

A diferença está nos parametros do setTimeout(). Tu queres que ele (por exemplo), após 2 segundos, volte ao 200, certo? Então chama a função com o valor1 a 200 após 2 segundos usando o setTimeout() (em vez de usar o valor atual do valor1).

Vê se com estas pistas e lógicas de resolver o problema já consegues resolver o problema para a foto1. Quando resolveres isto para a foto1 vamos fazer as alterações para a foto2 começar a aparecer e a mover-se incluindo a espera.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
HQuintas

Tá a rodar, mas ao fim de um pouco a imagem começa a ficar esquisita (com falhas a passar muito depressa)

<!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=utf-8" />
<title>Roda fotos</title>
<style type="text/css">
			#A{
							border-width:0px;width:200px;border-color:Red;border-style:solid;height:133px;
							position:absolute;
						    overflow: hidden;
			}
			.image
			{
			   position: absolute;
			   z-index: 100;
			}
</style>

<script type="text/javascript">

			function move_img1(valor1)
			{
				valor1--;

				document.getElementById('img1').style.left = valor1 + 'px';	
				if (valor1==-200){
					setTimeout("move_img1("+ 200 +")",2000);
				}

				setTimeout("move_img1("+ valor1 +")",2);	
			}
	window.onload=function() {move_img1(200);}
</script>

</head>

<body>
<div id="A">

	<img alt="" class="image" id="img1" src="imagens/imagem1.jpg" width="200px" height="133px"/>		
	<!-- <img alt="" class="image" id="img2" src="imagens/imagem2.jpg" width="860px" height="343px"/> -->	
</div>

</body>
</html>

Share this post


Link to post
Share on other sites
taviroquai

Tá a rodar, mas ao fim de um pouco a imagem começa a ficar esquisita (com falhas a passar muito depressa)


				if (valor1==-200){
					setTimeout("move_img1("+ 200 +")",2000);
				}

				setTimeout("move_img1("+ valor1 +")",2);	

Atenção que o setTimeout regista a execução de uma função de forma "asyncrona"... dessa forma vai executar 2 vezes as funções... basta controlares a variável valor1 e usas apenas 1 setTimeout:

if (valor1==-200) valor1 = 200
setTimeout("move_img1("+ valor1 +")",2);

EDIT: ainda assim, seria necessário terminar o movimento com clearTimeout...

Share this post


Link to post
Share on other sites
coxosclassic

Boas,

Hás-de reparar que na tua funcao "move_img1" tens uma condicao:

if (valor1 == -200)
{
    setTimeout("move_img1("+ 200 +")",1000);
}

e logo a seguir tens outra chamada ao setTimeout:

if (valor1 == -200)
{
    setTimeout("move_img1("+ 200 +")",1000);
}
setTimeout("move_img1("+ valor1 +")",2);

o teu problema é que no caso de a condicao ser verdadeira (valor1 == -200), tas a carregar 2 setTimeout ao mesmo tempo... Logo isso dar bronca :)

experimenta incluir a 2 chamada de setTimeout no "else" dessa condicao:

if (valor1 == -200)
{
    setTimeout("move_img1("+ 200 +")",1000);
}
else
{
    setTimeout("move_img1("+ valor1 +")",2);
}

Assim tens a certeza que so chamas 1 vez a funcao "move_img1" de cada vez que passas no "loop".

Espero que ajude! :D

cumps,

cc

EDIT:: Enquanto respondia, o taviroquai chegou-se á frente^^ :)


Cumps,

cc

Share this post


Link to post
Share on other sites
HQuintas

experimenta incluir a 2 chamada de setTimeout no "else" dessa condicao:

if (valor1 == -200)
{
    setTimeout("move_img1("+ 200 +")",1000);
}
else
{
    setTimeout("move_img1("+ valor1 +")",2);
}

Assim tens a certeza que so chamas 1 vez a funcao "move_img1" de cada vez que passas no "loop".

Espero que ajude! :)

Ajudou e bastante, está a funcionar muito bem

Share this post


Link to post
Share on other sites
coxosclassic

Boa!

mas se fosse a ti usava antes a solucao do taviroquai...

Atenção que o setTimeout regista a execução de uma função de forma "asyncrona"... dessa forma vai executar 2 vezes as funções... basta controlares a variável valor1 e usas apenas 1 setTimeout:

if (valor1==-200) valor1 = 200
setTimeout("move_img1("+ valor1 +")",2);

é bem mais eficiente :)


Cumps,

cc

Share this post


Link to post
Share on other sites
brunoais

Boa!

mas se fosse a ti usava antes a solucao do taviroquai...é bem mais eficiente :)

Para o caso dele a tua solução, com o if then else,  é melhor para se aplicar. Aliás, o taviroquai nem reparou que os tempos de espera são diferentes.

Agora que já funciona falta a ultima fase.

Agora é preciso por a outra imagem a aparecer depois desta e, depois da outra, por esta a mover, por aí fora.

Para a solução que arranjei para ti, cais precisar de aplicar a mesma lógica para a função move_img2 que usaste para a move_img1.

Podes até copiar o código, colar e depois fazer as alterações que precisas (no getElementById(), por exemplo).

Depois de teres tudo pronto vai-se fazer o seguinte:

Quando a imagem1 acaba de mover (o if deu true) ele executa o setTimeout() e tens aquela string que faz chamar a própria função, certo?

Bom agora o que ele vai fazer não é chamar a própria função mas sim a outra função (a move_img2()). Depois de fazeres isso e antes de testar, vais aplicar a mesma lógica para o move_img2 (qd o if dá true, o setTimeout() chama a move_img1). Tenta fazer isso. Depois veremos se fica bem feito.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
coxosclassic

Para o caso dele a tua solução, com o if then else,  é melhor para se aplicar. Aliás, o taviroquai nem reparou que os tempos de espera são diferentes.

nem ele nem eu :)

@HQuintas:

o que pretendes mesmo fazer? um slideshow?

Iras usar so 2 imagens? ou queres tornar isso mais dinamico?


Cumps,

cc

Share this post


Link to post
Share on other sites
brunoais

nem ele nem eu :)

@HQuintas:

o que pretendes mesmo fazer? um slideshow?

Iras usar so 2 imagens? ou queres tornar isso mais dinamico?

Para o sistema que ele quer existe uma solução bem boa usando funções anónimas e a repetição com o setInterval() e clearInterval() mas não quis ir por aí pq, para muitos, é muito complicado para se perceber. Por isso arranjei uma solução simples, não a melhor (nem de perto), mas suficientemente boa para o que ele quer. E mais! É um sistema facilmente escalonável, por isso, achei uma boa opção tentar ensinar-lhe daquela maneira.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.