CODEWITHSUNDEEP
javascripthtml
Pauline Mckenzie
Pauline Mckenzie

Reputation: 17

How to change an image once after a number of seconds?

I am trying to get an image to change from one image to another after 10 secs. I have found this code (below) but it keeps on changing between images every 10 seconds.

How would I make it stop after changing image only once? 

<!DOCTYPE html>
<html>

<head>
  <title>Demo</title>
</head>

<body onload="startTime();"><img id="img1" />
  <script>
    var imgArray = new Array(" IMAGE1.gif", "IMAGE2.png");
    var imgCount = 0;

    function startTime() {
      if (imgCount == imgArray.length) {
        imgCount = 0;
      }
      document.getElementById("img1").src = imgArray[imgCount];
      imgCount++;
      setTimeout("startTime()", 10000);
    }
  </script>
</body>

</html>

If you could help me or know a code please please help me.

Upvotes: 0

Views: 146

Answers (1)

Brett Gregson
Brett Gregson

Reputation: 5913

You can call the change image function once:

setTimeout(function(){
    document.getElementById("img1").src = "IMAGE2.png";
}, 10000);

Working example here

Or with your code:

<!DOCTYPE html>
    <head>
        <title>Demo</title>
    </head>

    <body>
        <img id="img1" src="IMAGE1.gif" />
        <script>
            setTimeout(function(){
                document.getElementById("img1").src = "IMAGE2.png";
            }, 10000);
        </script>
    </body>
</html>

Upvotes: 3

Related Questions