setInterval() 改变图像

Question

The goal: When the page is loaded, display the image andy_black.jpg. After two seconds, change the image source, and the thus image in the browser, to a second image called andy_white.jpg. This will change back and forth every 2 seconds.

I checked out this article: SetInterval function calls

(I searched other as well, with the tags [javascript] [function] and the word "setinterval", but most were using jQuery and my intention here is not to use any jQuery, it's an experiment in JavaScript after all).

which was quite helpful for before I had read it my code was much longer and the function was not called in the setInterval() function.

So here's some code: Suggestions?

 var i = 1; function change_pic() { i + 1; if (i == 5) { i = 1; } //I suspect the computer will read i as 5 for some //tiny amount of time before reverting back to 1 //which I suspect could cause a further problem, but //is it the source of the current issue? if (i == 1 || i == 2) { document.getElementById('img_to_flip').src = "https://cdns-images.dzcdn.net/images/artist/5d9e44027cc266260d7bd932d98f739d/500x500.jpg"; } else { document.getElementById('img_to_flip').src = "https://media.s-bol.com/q7R3B8QVrAj2/550x549.jpg"; } } var pic_src = setInterval(change_pic, 2000);

 <img id="img_to_flip" src="https://media.s-bol.com/q7R3B8QVrAj2/550x549.jpg" height="100" width="100" />

Answer 1

You forget to actually reassign the new value to i .

Either use:

i = i + 1;

or

++i;

Also, why count to five when you only have two states? A common paradigm to have an auto-resetting counter is to use modulo arithmetic:

i = (i + 1) % 2;

which guarantees that i will only ever have values of 0 or 1 .

FWIW, here's an alternate way of writing the entire feature that'll work for any number of images - just populate the pics array:

(function() {     // function expression closure to contain variables
    var i = 0;
    var pics = [ "andy_white.jpg", "andy_black.jpg" ];
    var el = document.getElementById('img_to_flip');  // el doesn't change
    function toggle() {
        el.src = pics[i];           // set the image
        i = (i + 1) % pics.length;  // update the counter
    }
    setInterval(toggle, 2000);
})();             // invoke the function expression

Answer 2

If you want to avoid the delay in first time setInterval call the function before the setInterval as shown in the top answer:

(function() {     // function expression closure to contain variables
    var i = 0;
    var pics = [ "andy_white.jpg", "andy_black.jpg" ];
    var el = document.getElementById('img_to_flip');
    function toggle() {
        el.src = pics[i];           // set the image
        i = (i + 1) % pics.length;  // update the counter
    }
    toggle()
    setInterval(toggle, 2000);
})();             // invoke the function expression