javascript - setInterval() change image - Stack Overflow

admin管理员组

文章数量:1394161

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 puter 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 = ".jpg";
  } else {
    document.getElementById('img_to_flip').src = ".jpg";
  }
}
var pic_src = setInterval(change_pic, 2000);

<img id="img_to_flip" src=".jpg" height="100" width="100" />

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 puter 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/images/artist/5d9e44027cc266260d7bd932d98f739d/500x500.jpg";
  } else {
    document.getElementById('img_to_flip').src = "https://media.s-bol./q7R3B8QVrAj2/550x549.jpg";
  }
}
var pic_src = setInterval(change_pic, 2000);

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

• javascript
• image
• function
• setinterval

Share Improve this question Follow edited Aug 18, 2022 at 7:25 mplungjan 179k2828 gold badges182182 silver badges240240 bronze badges asked Aug 25, 2013 at 20:35 user2340177user2340177 2

• i + 1; isn't going to work. It should be i = i + 1; or just i++; – j08691 Commented Aug 25, 2013 at 20:39
• Dont forget to debug your code at "Web Inspector" at google chrome or other modern browser. (Hit F12 for most browsers...) – JohnnyJS Commented Aug 25, 2013 at 20:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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 mon 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 = ["https://media.s-bol./q7R3B8QVrAj2/550x549.jpg", "https://cdns-images.dzcdn/images/artist/5d9e44027cc266260d7bd932d98f739d/500x500.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

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

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

本文标签： javascriptsetInterval() change imageStack Overflow