CODEWITHSUNDEEP
javascripthtml
angrybarney
angrybarney

Reputation: 23

displaying one image, then another using HTML

I asked a similar question elsewhere, but I am trying to switch from one image to the next after 500 ms. Somebody provided this answer, but the code only works when I preview it in the HTML and Javascript boxes of the site i'm using (then displays nothing when I launch it): 

<html>
<head>
<title>switch</title>
<script type = "text/javascript">

var images = [];
var x = 0;
var $img = document.getElementById("img");

images[0] = "image1.jpg";
images[1] = "image2.jpg";

function displayNextImage() {
    if (++x < images.length) {
        $img.src = images[x];
        setInterval(displayNextImage, 500);
    }
    else {
        $img.remove();
    }
}

function startTimer() {
    setInterval(displayNextImage, 500);
}


</script>
</head>
</html>
<body onload = "startTimer()">
<img id="img" src="image1.jpg">
</body>
</html>

Is there a way to get this to work in HTML only? I tried doing this, but it only stays on the first image:

<html>
<head>
<title>switch</title>
</head>
<body>

<img id="img" src="http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg"     
alt="" />

<script>
    var images = [], x = 0;
    images[0] = "http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg";
    images[1] = "http://trainwithfinishers.com/wp-content/uploads/2014/08/TEST.jpg";

    function displayNextImage() {
     if (++x &lt; images.length) {
        document.getElementById("img").src = images[x];
        setInterval(displayNextImage, 500);
    }

    else{
        img.remove();
    }

     function startTimer() {
    setInterval(displayNextImage, 500);
    }

</script>

</body>
</html>

Also, jQuery doesn't work on the site i'm using.

Upvotes: 1

Views: 181

Answers (2)

Rahul Desai
Rahul Desai

Reputation: 15501

You just need to invoke the startTimer() function.

Read about JavaScript Function Invocation.

Also note that you missed closing the displayNextImage() function.

Replace your <script> code block with this one:

<script>

var images = [], x = 0;
images[0] = "http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg";
images[1] = "http://trainwithfinishers.com/wp-content/uploads/2014/08/TEST.jpg";

function displayNextImage() {
  if (++x < images.length) {
    document.getElementById("img").src = images[x];
    setInterval(displayNextImage, 500);
  }

  else{
    img.remove();
  }
}

function startTimer() {
  setInterval(displayNextImage, 500);
}

startTimer();

</script>

Here is the working code snippet:

var images = [], x = 0;
images[0] = "http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg";
images[1] = "http://trainwithfinishers.com/wp-content/uploads/2014/08/TEST.jpg";

function displayNextImage() {
  if (++x < images.length) {
    document.getElementById("img").src = images[x];
    setInterval(displayNextImage, 500);
  }

  else{
    img.remove();
  }
}

function startTimer() {
  setInterval(displayNextImage, 500);
}

startTimer();
<img id="img" src="http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg"     
alt="" />

Upvotes: 0

vernak2539
vernak2539

Reputation: 596

You never actually call the startTimer function.

Try adding startTimer(); before the script tag is closed.

Your first code had an onload event on the body, which would execute your function.

UPDATE (you're also missing a curly bracket on your if statement in displayNextImage())

<script type="text/javascript">
    var images = [], x = 0;
    images[0] = "http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg";
    images[1] = "http://trainwithfinishers.com/wp-content/uploads/2014/08/TEST.jpg";

    function displayNextImage() {
      if (++x < images.length) {
        document.getElementById("img").src = images[x];
        setInterval(displayNextImage, 500);
      } else {
        img.remove();
      }
    }

    function startTimer() {
      setInterval(displayNextImage, 500);
    }

    startTimer();

</script>

Upvotes: 2

Related Questions