Ir para conteúdo

POWERED BY:

Arquivado

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

redviking

[Resolvido] Animar imagens em javascript

Por , em Javascript

Recommended Posts

redviking    0

redviking
Postado

Olá pessoal, tenho que fazer uma animação com imagens a partir do seguinte código, mas por alguma razão não está a funcionar...

Alguma sugestão?

 

<html>
<head>
<script type="text/javascript">
function poeImagem(){
 var nome = elenco[prox];
 document.getElementById("foto").src=name;
 prox++;
 if(prox==4) prox = 0;
}
set Internal("poeImagem()", 2000);
</script> 
</head>
<body>
<script type="text/javascript">
var elenco = new Array(4);
elenco [0] = '<img src="imagens/e1.jpg" id="foto"/>';
elenco [1] = '<img src="imagens/e2.jpg" id="foto"/>';
elenco [2] = '<img src="imagens/e3.jpg" id="foto"/>';
</script>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

oque é:set Internal ??

 

crie o array antes de chamar a função

e use um contador com escopo global

 

<html>
<head>
<script type="text/javascript">
var elenco = new Array();
elenco [0] = 'e1.png';
elenco [1] = 'e2.png';
elenco [2] = 'e3.png';
var prox = 0;
function poeImagem()
{
	document.getElementById('foto').src = elenco[ prox ];
	prox++;
	if( prox == (elenco.length) ) prox = 0;
}
window.setInterval( poeImagem, 1000 );
</script> 
</head>
<body>

<img src="e1.png" alt="" id="foto" />

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

SkidV    0

SkidV
Postado

Por favor, me desculpem por reabrir este tópico já resolvido, mas sou bastante cru em javascript e acabei aproveitando o deste tópico, para animar um logotipo em PNG para um site que estou a desenvolver.

 

A minha pergunta é a seguinte: Teria como eu setar tempos diferentes entre as imagens? Pq preciso que uma dure uns segundos mais que a outra e neste script só posso setar o tempo geral para as duas de uma vez. 

 window.setInterval( poeImagem, 1000 );

 

Se alguem puder ajudar, fico muito grato. Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

51L3N7    1

51L3N7
Postado

É só usar o Math.random(). No lugar de 1000 põe:

 

Math.random() * TEMPOMAX

Compartilhar este post

Link para o post
Compartilhar em outros sites

SkidV    0

SkidV
Postado

Por favor, me desculpem por reabrir este tópico já resolvido, mas sou bastante cru em javascript e acabei aproveitando o deste tópico, para animar um logotipo em PNG para um site que estou a desenvolver.

 

A minha pergunta é a seguinte: Teria como eu setar tempos diferentes entre as imagens? Pq preciso que uma dure uns segundos mais que a outra e neste script só posso setar o tempo geral para as duas de uma vez. 

 window.setInterval( poeImagem, 1000 );

 

Se alguem puder ajudar, fico muito grato. Obrigado.

 

Olá, muito obrigado pela ajuda,

 

Mas de qualquer forma, assim também ficará setado o mesmo tempo para as duas imagens. Eu preciso que uma delas, dure mais tempo que a outra.

Para você poder entender melhor, eu estou precisando animar um ursinho que pisca os olhos... A imagem dos olhos fechados só deve aparecer por uma fração de tempo.

 

Mais alguma dica para me salvar? rsrsrs...

Compartilhar este post

Link para o post
Compartilhar em outros sites

51L3N7    1

51L3N7
Postado 

function animarImg( img1, img2 ) {
img = document.getElementById( 'img' )
img.src = 'imgs/img.png';
setTimeout(function() { img.src = 'imgs/img.jpg'; }, 10 )
setTimeout( animarImg, 100 );		
}
onload = Function( 'animarImg( "imgs/img.png", "imgs/img.jpg" )' );

 

A partir daí é só ajustar o parametro img1 e img2 para o local onde as imagens estã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