Ir para o conteúdo
HQuintas

Pausa em rolar imagens

Mensagens Recomendadas

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>

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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);


}

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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);}

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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>

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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...

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.