-2

There's an img element with a certain src. I want to change the src after let's say 1000ms and then another after 1000ms and then stop at the last image. Is that possible in jQuery, with delay() maybe?

Bill Hicks
  • 105
  • 1
  • 4
  • 15
  • Yes, that's absolutely possibly. Have you [**tried anything so far**](http://meta.stackoverflow.com/questions/261592)? – Obsidian Age Apr 16 '18 at 23:32
  • 1
    Use setInterval – StackSlave Apr 16 '18 at 23:33
  • @ObsidianAge I've tried this: `setTimeout(function() { document.querySelector(".cpu-card img").setAttribute("src", "img/card.png"); }, 1000);` but it doesn't work. – Bill Hicks Apr 16 '18 at 23:34
  • 1
    you should not skip the awesomeness of google before posting a question here, try to look for ways of getting as near as possible to where you want to, try and fail and try again and then when you are wiping the sweat off your forehead, show us your efforts and ask for help, don't expect the community to do ALL of the work. best of luck!! :) – Scaramouche Apr 16 '18 at 23:35
  • Possible duplicate of [Javascript : Change img src After some interval of time](https://stackoverflow.com/questions/31409311/javascript-change-img-src-after-some-interval-of-time) – Studocwho Apr 16 '18 at 23:37
  • Google is your friend and companion, use it! However, take a look at this [answer](https://stackoverflow.com/a/20639854/2358222)... – Studocwho Apr 16 '18 at 23:43
  • Please up your game if you're planning on asking further questions on this site. Please read [How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users). If you Google, you need to show the fruits of your labors in your question. – Hovercraft Full Of Eels Apr 16 '18 at 23:54

2 Answers2

4

Place the image paths in an array. Then, using a timer (setInterval() or setTimeout()), you change the source of the image with the next item in the array until you've reach the end.

Anything you can do with vanilla JavaScript can be done with JQuery, but JQuery is way overused and for something this simple, would be overkill.

var paths =
[ "https://www.spreadshirt.com/image-server/v1/mp/designs/12386804,width=178,height=178/winking-smiley-face.png",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTUirw89Ct-tBfgNgrCV8ygX65aomMvVbr1LsEgnaH8eJBG3FZH",
"https://www.energylivenews.com/wp-content/uploads/2014/06/Smiley-face-emoticon-575.jpg"];

var img = document.getElementById("img");
var i = 0;
var timer = setInterval(function(){
  // If we've reached the end of the array...
  if(i >= paths.length){
   clearInterval(timer);     // Stop the timer
   return;                   // Exit the function
  }
  img.src = paths[i++]; // Sete the path to the current counter and then increase the counter
}, 1000);
img {
  width:200px;
}
<img id="img">
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
0

For an infinite loop change the code above to:

var img = document.getElementById("img");
var i = 0;
var timer = setInterval(function(){
// If we've reached the end of the array...
if(i >= paths.length){
i=0;
}
img.src = paths[i++]; // Sete the path to the current counter and then increase the counter
}, 1000);
Nico Vink
  • 21
  • 8