How to animate jpgs using setInterval()

**CrazyFileMaker** · 02-03-2011 12:54 AM

Hello,
My question is about creating an animation using the setInterval function.

I want to load 5 jpgs in the head section. I then want to call them - one second apart - using the setInterval function in the body section.

Below is a simple example of what I'm attempting to do. Can someone please correct my code? Or tell me what I'm doing wrong?

Thanks so much!

HTML Code:

  <head>
    <script type="text/javascript">

      var c = 1;

      /* Preloading images */
      var image1 = new Image();
      image1.src = "a1.jpg";
      var image2 = new Image();
      image2.src = "a2.jpg";
      var image3 = new Image();
      image3.src = "a3.jpg";
      var image4 = new Image();
      image4.src = "a4.jpg";
      var image5 = new Image();
      image5.src = "a5.jpg";

      function disp_img(w)
      {
      if (c == 6)
      {
      c = 1;
      }
   
      var img_src = "a" + c + ".jpg";
      document.ani.src = img_src;
      c++;

    </script>
  </head>
  
  <body>
    <script type="text/javascript">

      setInterval("disp_img(c)", 1000);
  
    </script>
  </body>

**tirna** · 02-03-2011 01:51 AM

Code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            var picPaths = ['pic1.jpg','pic2.jpg','pic3.jpg'];
            picO = new Array();
            for(i=0; i < picPaths.length; i++) {
                picO[i] = new Image();
                picO[i].src = picPaths[i];
            }
            var curPic = -1;
            function swapImage(){
                curPic = (++curPic > picPaths.length-1)? 0 : curPic;
                imgO.src = picO[curPic].src;
                setTimeout(swapImage,1000);
            }
            window.onload=function(){
                imgO = document.getElementById("imgRot");
                swapImage();
            }
        </script>
    </head>
    <body>
        <div>
            <img src="" alt="" id="imgRot" />
        </div>
    </body>
</html>

**CrazyFileMaker** · 02-03-2011 07:41 PM

tirna,
Thank you so much! That is EXACTLY what i was looking to do.

Not only is it usable, but the code you provided is very clear. I learned a lot just from going through each line.

Thanks again!

Thread: How to animate jpgs using setInterval()

Thread Tools

Display

How to animate jpgs using setInterval()

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions