2

Bom a minha dúvida é a seguinte, gostaria de saber, como faria para que o javascript desse um intervalo de 5 segundos antes de editar de imagem.

Meu código:

window.onload = function() {
    if(2>1){
        document.getElementById("imagem").src = "https://placeholdit.imgix.net/~text?txtsize=36&txt=Imagem+1&w=350&h=150";
        document.getElementById("imagem2").src = "https://placeholdit.imgix.net/~text?txtsize=36&txt=Imagem+2&w=350&h=150";
        document.getElementById("imagem3").src = "https://placeholdit.imgix.net/~text?txtsize=36&txt=Imagem+3&w=350&h=150";
    }
}
 
<img id="imagem" src="https://placeholdit.imgix.net/~text?txtsize=36&txt=Imagem+1&w=350&h=150">
<img id="imagem2" src="https://placeholdit.imgix.net/~text?txtsize=36&txt=Imagem+2&w=350&h=150">
<img id="imagem3" src="https://placeholdit.imgix.net/~text?txtsize=36&txt=Imagem+3&w=350&h=150">	

http://pastebin.com/Bc82kPDt

Ou seja que houvesse um intervalo em cada src de 5 segundos.

Que primeiro o javascript editasse o id "imagem", passado 5 segundos editasse o id "imagem2" etc...

2 Respostas 2

1

Você pode utilizar o setTimeout para gerar o delay desejado.

function iniciarSlideImagens() {

    var exibirImagens = function(current) {
        var arrImgsAmarelas = [ 'amarelo0.png', 'amarelo1.png' ];
        var arrImgsLaranjas = [ 'laranja0.png', 'laranja1.png' ];

        document.getElementById("imagem").src = "cores-roleta/" + arrImgsAmarelas[current];
        document.getElementById("imagem1").src = "cores-roleta/" + arrImgsLaranjas[current];

        if (++current >= arrImgsAmarelas.length) {
            current = 0;
        }

        setTimeout(function() { exibirImagens(current); }, 5000);
    };

    exibirImagens(0);

}

iniciarSlideImagens();
8
  • Boa Tarde, isso no caso altera apenas um id de um img, eu queria que alterasse varios ids de varios imgs.
    – Gonçalo
    17/06/2015 às 13:30
  • @Gonçalo Editei a resposta.
    – Oeslei
    17/06/2015 às 13:49
  • Eu coloquei o código da seguinte forma: pastebin.com/TLLAT0JE E só me aparece apenas a imagem da img.
    – Gonçalo
    17/06/2015 às 14:02
  • Como assim a imagem da img? Faltou você alterar o seletor para a imagem laranja, que deveria ser imagem1 e você manteve imagem2.
    – Oeslei
    17/06/2015 às 14:09
  • Bom Dia, peço desculpa mas sou mesmo iniciante na área, pode-me indicar o que é seletor?. Obrigado.
    – Gonçalo
    17/06/2015 às 14:13
1

Você pode realizar isso manipulando os objetos do DOM, removendo a imagem anterior e criando uma nova no lugar.

Javascript

var i = 1;
var id = 'imagem'
// Intervalo em milissegundos (1s == 1000ms)
var milissegundos = 2000; // 5000 = 5 Segundos

// Executa a função a cada intervalo de tempo
var interval = setInterval(function(){

  // Recebe o elemento
  var img = document.getElementById(id);

  i++;
  
  // Seta o source da nova imagem
  img.setAttribute('src', 'https://placeholdit.imgix.net/~text?txtsize=36&txt=Imagem+'+i+'&w=350&h=150');

  
}, milissegundos);
<div id="img-area">
    <img id="imagem" src="https://placeholdit.imgix.net/~text?txtsize=36&txt=Imagem+1&w=350&h=150" />
</div>


jQuery

var i = 1;
var id = '#imagem'
// Intervalo em milissegundos (1s == 1000ms)
var milissegundos = 2000;

// Executa a função a cada intervalo de tempo
var interval = setInterval(function(){
  i++;
  // Seta o source da nova imagem
    $(id).fadeOut(200, function(){
        $(id).attr('src', 'https://placeholdit.imgix.net/~text?txtsize=36&txt=Imagem+'+i+'&w=350&h=150').delay(100).fadeIn(200);
    });

}, milissegundos);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="img-area">
    <img id="imagem" src="https://placeholdit.imgix.net/~text?txtsize=36&txt=Imagem+1&w=350&h=150" />
</div>

Exemplo de Roleta

9
  • Peço desculpa, mas eu sou bocado novato na área do javascript, diga-m e uma coisa, Se eu quiser adicionar mais imagens a editar id's diferentes como faço?
    – Gonçalo
    17/06/2015 às 13:26
  • Opa @Gonçalo, quais são os dados que você tem? Você tem um array com as imagens? Quantas imagens queres adicionar por vez?
    – KaduAmaral
    17/06/2015 às 13:29
  • Bom vou tentar explicar direitinho, funciona da seguinte forma: Eu tenho um img de amarelo claro, um img de verde claro, um img, de laranja claro, um img roxo claro e um img vermelho claro, ai tipo se a condição cor for igual a vermelho, quero simular que passa por todas as cores até chegar vermelho ou seja é uma roleta, que basicamente mostra a imagem do verde escuro > mostra a imagem do verde claro, espera 1 segundo, ativa mostra imagem do laranja escuro > mostra imagem do laranja claro etc... até chegar ao vermelho
    – Gonçalo
    17/06/2015 às 13:32
  • 1
    Hmm. Entendi @Gonçalo Você precisa fazer isso com Javascript puro ou pode usar alguma biblioteca como jQuery?
    – KaduAmaral
    17/06/2015 às 13:39
  • Posso usar Jquery, nao tem problema.
    – Gonçalo
    17/06/2015 às 13:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .