www.webdeveloper.com
Results 1 to 4 of 4

Thread: rudimentary animation

  1. #1
    Join Date
    Aug 2004
    Location
    70 klicks above the Do Lung bridge
    Posts
    654

    rudimentary animation

    Is it possible to make a crude animation with javascript? I mean like a gif. Maybe a script that would show one image for .25 of a second then change to another for the same amount of time then another and so on. If there is could somebody point me in the direction of a site that would tell me (and what the process is called).
    Thanks

  2. #2
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    <script>
    var Counter = 0;
    var images = new Array()

    images[0]="image1.jpg"
    images[1]="image2.jpg"
    images[2]="image3.jpg"
    images[3]="image4.jpg"
    images[4]="image5.jpg"

    setInterval("RotateImages()",250);

    function RotateImages(){
    document.images[0].src=images[Counter];
    Counter++;
    if(Counter>=images.length) { Counter=0; }
    };

    </script>
    <img src="image1.jpg">
    Last edited by scragar; 12-14-2004 at 08:35 AM.
    If you are using PHP please use the [PHP] and [/PHP] forum tags for highlighting...
    The same applies to HTML and the forums [HTML][/HTML] tags.

  3. #3
    Join Date
    Aug 2004
    Location
    70 klicks above the Do Lung bridge
    Posts
    654
    You the man. Cheers.

  4. #4
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    if you wanna slow it down increase the number in:

    Code:
    setInterval("RotateImages()",250); // 250 = 1/4 of a second
                                       //1000 = 1 second
                                       //5000 = 5 seconds.
    you could also add a stop button:

    Code:
    <script>
    var Counter = 0;
    var images = new Array()
    
    images[0]="image1.jpg"
    images[1]="image2.jpg"
    images[2]="image3.jpg"
    images[3]="image4.jpg"
    images[4]="image5.jpg"
    
    var animation = setInterval("RotateImages()",250);
    
    function RotateImages(){
    document.images[0].src = images[Counter];
    Counter++;
    if(Counter >= images.length) { Counter=0; }
    };
    
    </script>
    <img src="image1.jpg">
    <input type=button value=stop onclick="clearInterval(animation);">
    If you are using PHP please use the [PHP] and [/PHP] forum tags for highlighting...
    The same applies to HTML and the forums [HTML][/HTML] tags.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles