Jump to content
rjsma

Javascript - mudar de imagem de x em x tempo

Recommended Posts

rjsma

Boas,

Alguem sabe um metodo permite mudar uma imagem por outra de x em x tempo em javascript?

Eu sei que posso fazer com o jquery mas gostava de fazer uma coisa muito simples de raiz com ou sem efeito na transição de 1 imagem por outra.

Abraço

Share this post


Link to post
Share on other sites
brunoais

"[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
rjsma

Se bem compreendi e uma coisa destas?


<script language=javascript>

function pacotemisto1() {  
         document.images["misto"].src = "imagens/packmisto1.jpg";  
}

function pacotemisto2() {  
         document.images["misto"].src = "imagens/packmisto2.jpg";  
}

setTimeout(pacotemisto1, 500);

setTimeout(pacotemisto2, 500);

</script>

Respondendo a tua pergunta queria em ordem certa e sempre a repetir, por exemplo:

1,2,3 quando chega a imagem 3 voltar ao inicio 1,2,3,1,2,3,1,2,3

Share this post


Link to post
Share on other sites
softklin

Podes usar um array com as tuas imagens, e depois uma função para as ir circulando, por exemplo

var nrImagem = 0;
var imagens = [];
var refrescar = 1; // mudar imagem de 1 em 1 segundo

// colocar aqui todas as imagens, seguindo a ordem numérica
imagens[0] = "endereço imagem 1";
imagens[1] = "endereço segunda imagem";
imagens[2] = "endereço terceira imagem";
//...

function rodarImagens() {
   document.images["misto"].src = imagens[nrImagem++];

   if (nrImagem >= imagens.length)
      nrImagem = 0;

   setTimeout("rodarImagens()", refrescar * 1000);  
}

rodarImagens();

Adaptado deste:

http://www.javascriptkit.com/howto/show2.shtml

mas reescrevi, porque o outro usava a função eval, a meu ver sem motivo para isso...


Nick antigo: softclean | Tens um projeto? | Wiki P@P

Ajuda a comunidade! Se encontrares algo de errado, usa a opção "Denunciar" por baixo de cada post.

Share this post


Link to post
Share on other sites
brunoais

Não gosto do teu código.

Podes usar um array com as tuas imagens, e depois uma função para as ir circulando, por exemplo

var nrImagem = 0;
var imagens = [];
var refrescar = 1; // mudar imagem de 1 em 1 segundo

// colocar aqui todas as imagens, seguindo a ordem numérica
imagens[0] = "endereço imagem 1";
imagens[1] = "endereço segunda imagem";
imagens[2] = "endereço terceira imagem";
//...

function rodarImagens() {
   document.images["misto"].src = imagens[nrImagem++];

   if (nrImagem >= imagens.length)
      nrImagem = 0;

   setTimeout("rodarImagens()", refrescar * 1000);  
}

rodarImagens();

Adaptado deste:

http://www.javascriptkit.com/howto/show2.shtml

mas reescrevi, porque o outro usava a função eval, a meu ver sem motivo para isso...

Com alguns ajuntes já fica melhor:

var nrImagem = 0;
var imagens = [];
var refrescar = 1; // mudar imagem de 1 em 1 segundo

// colocar aqui todas as imagens, seguindo a ordem numérica
imagens[0] = "endereço imagem 1";
imagens[1] = "endereço segunda imagem";
imagens[2] = "endereço terceira imagem";
//...

rodarImagens = function () {
   document.images["misto"].src = imagens[nrImagem];

   nrImagem = (nrImagem + 1) % imagens.length; 
}
var intervalControl = setInterval(rodarImagens, 1000 * refrescar);

Assim fica mais rápido, eficiente e faz o trabalho melhor.


"[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
softklin

Brunoais, já não é a primeira vez que sugeres esse tipo de optimizações a código (a mim e outros). Não tenho nada pessoal contra ti, mas por mim chega! Eu não me importo que sugiras alterações com o interesse de ficar, como dizes, mais rápido e eficiente. Mas vamos lá ver:

Assim fica mais rápido

Eu nem testei, e nem sequer me vou dar ao trabalho, porque a velocidade de execução é a mesma.

eficiente

Talvez por usares o setInterval. Mas achas bem teres variáveis com valores que nem sequer controlas (nrImagem)? Ao final de um tempo, a variável ter valores exorbitantes, isso é eficiente?

faz o trabalho melhor.

Faz exactamente a mesma coisa. O meu código funciona, tal como o teu funciona. Ponto.

Não gosto do teu código.

Azar o teu! Então, porque é que não o escreveste de novo, em vez de pegares nele, e o "optimizares"?

A única optimização válida é o uso do setInterval, concordo. Agora o resto, desculpa lá, mas não faças passar os outros por parvos, ok?

Cumps.


Nick antigo: softclean | Tens um projeto? | Wiki P@P

Ajuda a comunidade! Se encontrares algo de errado, usa a opção "Denunciar" por baixo de cada post.

Share this post


Link to post
Share on other sites
simonoop

Por acaso curti o "truque" revisitado do resto da divisão inteira do brunoais. É até elegante. Gosto! Não me lembraria de tal! Ao contrário do que diz o softclean, nenhuma var vai chegar a valores exorbitantes. A implementação mostra que o brunais tem algumas (digo eu!) noções de matemática. O resto do discurso pode-se atribuir facilmente a hubris. Hubris é bom.

Share this post


Link to post
Share on other sites
brunoais

Só para terminar (espero eu) a minha participação aqui:

Brunoais, já não é a primeira vez que sugeres esse tipo de optimizações a código (a mim e outros). Não tenho nada pessoal contra ti, mas por mim chega!

Talvez por usares o setInterval. Mas achas bem teres variáveis com valores que nem sequer controlas (nrImagem)? Ao final de um tempo, a variável ter valores exorbitantes, isso é eficiente?

Não encontro qd é q isso acontece. Podes-me ajudar?

Faz exactamente a mesma coisa. O meu código funciona, tal como o teu funciona. Ponto.

Nunca gostei de ficar por aí.

Azar o teu! Então, porque é que não o escreveste de novo, em vez de pegares nele, e o "optimizares"?

Porque eu n gostei do teu código cmo um todo mas gostei de muitas partes dele. E a ideia por detrás de cda coisa tb foi bem pensada. Mas n foi escrito da melhor maneira, por isso, n gostei.

A única optimização válida é o uso do setInterval, concordo. Agora o resto, desculpa lá, mas não faças passar os outros por parvos, ok?

Do ponto de vista de velocidade e optimização, retirar um if é muito mais rápido. Vai investigar sobre velocidade em java, C, C++, javascript :P ....

A implementação mostra que o brunais tem algumas (digo eu!) noções de matemática.

E fica por aí. Tenho noções de matemática... (a sério... sou mau)

O softclean dá bons códigos, aproveita-os. O que eu noto é que, muitas vezes, não aplica estas práticas de acelerar o código e optimizar o tamanho, embora eles façam o mm.


"[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
softklin

:$ Tens razão, brunoais. Eu quando falei nos valores exorbitantes, nem reparei que atribuías o valor para nrImagem: é claro que os valores apenas se mantêm no intervalo. O código não tem problemas, e está melhorado em relação ao meu. O que me picou foi isto:

Não gosto do teu código.

A partir daí fiquei "cego", mas não devia ter agido assim. Não se justificava, e peço-te desculpa por isso. Eu, da minha parte, também fico por aqui, e espero não voltar a repetir incidentes do género.

O resto do discurso pode-se atribuir facilmente a hubris. Hubris é bom.

Fui arrogante, e peço desculpa também por isso. Já me justifiquei atrás, apesar da minha acção não ser justificável.

Cumprimentos.


Nick antigo: softclean | Tens um projeto? | Wiki P@P

Ajuda a comunidade! Se encontrares algo de errado, usa a opção "Denunciar" por baixo de cada post.

Share this post


Link to post
Share on other sites
brunoais

(espero n estar a estragar o tópico com flaming mas acho q devo indicar isto em público)

Desculpas aceites, sem excitação. Fico contente por reparares e pedires desculpas :cheesygrin:.

MM q o que eu tenha escrito seja verdade (do meu ponto de vista), muitas vezes esqueço-me da parte de andar um pouco "às voltas" ou usar palavras q dêem menos impacto. Só qd chega a este ponto é q normalmente reparo nisso e acho q deveria pedir desculpa por essa parte. Eu gosto q me corrijam qd estou errado pq eu muitas vezes nem reparo nisso.

Aproveito para pedir q continues a mostrar código a quem pedir. Foi ele q me inspirou a fazer aquela 2ª versão.


"[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
rjsma

Desculpem-me a demora a responder mas tenho tido pouco tempo.Já consegui fazer o que desejava graças a vossa ajuda.

Muito obrigado  :P

Share this post


Link to post
Share on other sites
rjsma

Esqueci me de pedir um esclarecimento, se por acaso se quisesse associar 1 imagem a um texto, ou numero e quando a imagem estivesse a passar o numero/texto mudava de cor do genero a este slideshow, como poderia resolver isso?

http://www.magentocommerce.com/

Share this post


Link to post
Share on other sites
rjsma

atributo?Como assim?Não apanhei o raciocionio

Eu queria fazer isso de modo a poder aproveitar o metodo que o o brunais e o softclean sugeriram

var nrImagem = 0;
var imagens = [];
var refrescar = 1; // mudar imagem de 1 em 1 segundo

// colocar aqui todas as imagens, seguindo a ordem numérica
imagens[0] = "endereço imagem 1";
imagens[1] = "endereço segunda imagem";
imagens[2] = "endereço terceira imagem";
//...

rodarImagens = function () {
   document.images["misto"].src = imagens[nrImagem];

   nrImagem = (nrImagem + 1) % imagens.length; 
}
var intervalControl = setInterval(rodarImagens, 1000 * refrescar);

Em javascript ainda estou muito verde, só sei as coisas básicas, agora estou a tentar emadurecer nesta ling. de script.

Cumprimentos

Share this post


Link to post
Share on other sites
brunoais

atributo?Como assim?Não apanhei o raciocionio

Eu queria fazer isso de modo a poder aproveitar o metodo que o o brunais e o softclean sugeriram

Em javascript ainda estou muito verde, só sei as coisas básicas, agora estou a tentar emadurecer nesta ling. de script.

Cumprimentos

Q tal por objectos?

Talvez algo assim?

var nrImagem = 0;
var imagens = [];
var refrescar = 1; // mudar imagem de 1 em 1 segundo

// colocar aqui todas as imagens, seguindo a ordem numérica
imagens[0] = { src : "endereço imagem 0", text : "texto da imagem 0" } ;
imagens[1] = { src : "endereço imagem 1", text : "texto da imagem 1" } ;
imagens[2] = { src : "endereço imagem 2", text : "texto da imagem 2" } ;
//...

function rodarImagens() {
   document.images["misto"].src = imagens[nrImagem].src;
   // (agora... q queres fazer com o texto?
   // sempre que queres aceder a ele fazes: imagens[nrImagem].texto
  
   nrImagem = (nrImagem + 1) % imagens.length; 
}

var intervalControl = setInterval(rodarImagens, 1000 * refrescar);


"[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
rjsma

Queria fazer tipo isto: http://www.magentocommerce.com/  -  os numeros a mudar de cor consoante a sua imagem.

É possivel associar um id(css)  no codigo javascript por exemplo aqui 

text : "texto da imagem 0" } ;

Gostava de poder alterar os estado do link e poder posicionar na pagina.

Cumprimentos

Share this post


Link to post
Share on other sites
brunoais

Acho q com isto deves conseguir...

var numbers = document.evaluate("//span[@name='slidenumber']", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for( var i = 0; i < numbers.snapshotLength; i++){
    if(i == nrImagem){
        numbers.snapshotItem(i).class = "enthasisedNumber";
    }else{
        numbers.snapshotItem(i).class = "normalNumber";
    }
}

(nota: não testado)

Acho q poderia ser melhorado mas agora n sei bem cmo e o quanto q pode ser melhorado depende de cmo isso vai funcionar.


"[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

Uma coisa q me esqueci de indicar:

Cada um dos números tem de estar dentro de tags span e ter como name 'slidenumber'.

Exemplo:

<span name='slidenumber'>1</span><span name='slidenumber'>2</span><span name='slidenumber'>3</span><span name='slidenumber'>4</span>


"[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
rjsma

Nesta última semana tenho andado a estudar a biblioteca jquery.Realmente simplifica muito a nossa vida.Tenho tentado construir uma logica que fizesse passar as imagens de x em x tempo mas desta vez em jquery. Tenho o seguinte codigo:

$(document).ready(function(){
$('img').toggle
function(){
$('img').attr("src","imagens/02.jpg");
$(this).show(5000);
},
function(){
$('img').attr("src","imagens/03.jpg");
$(this).show(5000);
},
function(){
$('img').attr("src","imagens/04.jpg");
$(this).show(5000);
}
});
});

Ao carregar a página, troca logo o src para a imagem 02.jpg, nem faz um intervalo de 5 seg, por exemplo.Não encontrei nenhum evento que fizesse um intervalo depois da pagina ser carregada e não gostava de usar o evento submit porque gostava que a transacção das imagens fossem automatica.E depois de passar para a imagem 02, já não passa para a 03 e consequentemente para 04.

O meu raciocinio está meio errado e precisava de ajuda de alguem para ajudar-me a finalizar este bloco de codigo.

Cumprimentos

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

×
×
  • Create New...

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.