How to show an image every 5 seconds javascript

Asked

Viewed 3,779 times

2

Well my question is the following, I would like to know, how would you make javascript take a 5 seconds interval before editing image.

My code:

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

That is to say that there was an interval in each src of 5 seconds.

First javascript edit the id "image", after 5 seconds edit the id "imagem2", etc...

javascript

2 answers

1

You can accomplish this by manipulating DOM objects, removing the previous image and creating a new one instead.

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>

Example of Roulette

  • I’m sorry, but I’m bit novice in the area of javascript, say-m and one thing, if I want to add more images to edit different id’s how do?

  • Opa @Gonçalo, what data do you have? Do you have an array of images? How many images do you want to add at a time?

  • Well I will try to explain it very well, it works as follows: I have an img of light yellow, an img of light green, an img of light orange, a light purple img and a light red img, ai type if the color condition is equal to red, I want to simulate that it goes through all the colors until it gets red, which is a roulette wheel, which basically shows the image of dark green > shows the image of light green, wait 1 second, active shows dark orange image > shows light orange image etc... until you get to red

  • 1

    Hmm. I get it @Gonçalo You need to do this with pure Javascript or you can use some library like jQuery?

  • I can use Jquery, no problem.

  • @Gonçalo, I added a link to the answer. ;)

  • Friend just tell me one thing, this works on the same img id?

  • Yes @Gonçalo, you can do it direct document.getElementById(id).setAttribute('src', 'caminho/da/imagem.jpg');

  • I’ve got it Thank you!

Show 4 more comments

1

You can use the setTimeout to generate the desired delay.

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();

  • Good Afternoon, this in case changes only an id of an img, I wanted to change several ids of various imgs.

  • @Gonçalo Editei the answer.

  • I put the code as follows: http://pastebin.com/TLLAT0JE And I only see the image of img.

  • How so the img image? You missed you change the selector to the orange image, which should be imagem1 and you kept imagem2.

  • Good morning, I’m sorry but I’m really beginner in the area, can you tell me what is selector?. Thank you.

  • The problem was on the line document.getElementById("imagem2") that should be imagem1. I edited the answer code to close with your example.

  • Friend, what’s happening is this: https://www.youtube.com/watch?v=mYC0TPUldPc I wanted you to first turn on the yellow(yellow1.png) after 5 seconds turn off the yellow(yellow0.png) and turn on the orange (orange1.png) and so on....

  • Opa @Gonçalo, after seeing what you want, this Oeslei solution fits you well, I made some adjustments to it. https://jsfiddle.net/nxvh7fru/

Show 3 more comments

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.