Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stop motion for beginners

    saw a code in the internet and translated it for beginners

    <script type="text/javascript">
    var a=0;
    var t;
    var counter=0
    function runone()
    {
    a=a+1;
    t=setTimeout("runone()",500);
    two();
    }
    function runtwo()
    {
    i=a%32;
    runthree();
    }
    function stopit()
    {
    clearTimeout(t);
    counter=0;
    }
    function runthree()
    {
    if(i==1)
    {
    document.getElementById('b1').src="first.jpg";
    }
    else if (i==2)
    {
    document.getElementById('b1').src="second.jpg";
    }
    else if (i==3)
    {
    document.getElementById('b1').src="third.jpg";
    }
    else if (i==4)
    {
    document.getElementById('b1').src="fourth.jpg";
    }
    else if (i==5)
    {
    document.getElementById('b1').src="fifth.jpg";
    }
    else if (i==6)
    {
    document.getElementById('b1').src="sixth.jpg";
    }
    else if (i==7)
    {
    document.getElementById('b1').src="seventh.jpg";
    }
    else if (i==8)
    {
    document.getElementById('b1').src="eighth.jpg";
    }
    else if (i==9)
    {
    document.getElementById('b1').src="ninth.jpg";
    }
    else if (i==10)
    {
    document.getElementById('b1').src="tenth.jpg";
    }
    else
    {
    document.getElementById('b1').src="eleventh.jpg";
    }

    }
    </script>

    works for me. comment if ther's anything wrong.

  • #2
    Regular Coder
    Join Date
    Oct 2010
    Location
    San Antonio Tx
    Posts
    251
    Thanks
    12
    Thanked 11 Times in 11 Posts
    what does it do?

  • #3
    Regular Coder
    Join Date
    Sep 2010
    Location
    Far far away
    Posts
    122
    Thanks
    0
    Thanked 16 Times in 16 Posts
    Spagetti code. Hell for programmers. Learn loops and arrays as soon as possible! Do you really think that if you will be having 10 and more values you will check all of them one by one using by this monstruous code?

    Code:
    if(i==1)
    ..
    else if (i==2)
    ..
    else if (i==10000)
    ...

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow Might want to rework you suggested solution now with more experience.

    I'm a bit suprised that it works for you using the setTimeout function as it must be repeatedly called to work.
    I would have thought using the setInterval function would be better for the animated displays.

    At the minimum I would change the following:
    Code:
    var imgList = ['first.jpg','second.jpg','third.jpg','fourth.jpg',
                   'fifth.jpg','sixth.jpg','seventh.jpg','eighth.jpg',
                   'ninth.jpg','tenth.jpg','eleventh.jpg'
                  ];
    // easier to code if images were renamed as:
    // var imgList = ['1.jpg','2.jpg','3.jpg',.....'11.jpg'];
    
    function runthree() {
      document.getElementById('b1').src = imgList[i];
    }
    You could probably combine the runone() and runtwo() function into one function.
    And, the modulo value of 32 should probably be 11 for your example.
    Also, I see no reason for the "counter" variable as you only define it and never use it.

  • #5
    New Coder
    Join Date
    Feb 2011
    Posts
    69
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by tootsieprog View Post
    works for me. comment if ther's anything wrong.
    I don't see how it did work because your two(); function is not defined.

    Anyway, once I fixed that error and ran it on some test images, it seems your code cycles through some images, then pauses for a few seconds after the last image is displayed and then starts the cycle again. I've rehashed the code to the way I would do that.

    On page load, this code cycles through the images at 1 sec intervals. After the last image is displayed, the cycling stops and after another 3 seconds the cycle starts again.


    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 = ['num1.jpg','num2.jpg','num3.jpg','num4.jpg','num5.jpg']
                var oPics = new Array();
                for(i=0; i < picPaths.length; i++){
                    oPics[i] = new Image();
                    oPics[i].src = picPaths[i];
                }
                var curPic = -1;
                var timer;
                function swapImage(){
                    if(++curPic < oPics.length){       //not at end of picPaths array yet
                       oB1.src = oPics[curPic].src;
                       setTimeout(swapImage, 1000);
                    } else {         //have reached end of picPaths array, so start cycle again in 3 seconds
                       curPic = -1;
                       setTimeout(swapImage, 3000); //restart after 3 seconds
                    }
                }
                window.onload=function(){
                    oB1 = document.getElementById('b1');
                    swapImage();
                }
            </script>
        </head>
        <body>
            <div>
                <img src="" alt="" id="b1" />
            </div>
        </body>
    </html>
    Last edited by Eleos; 02-19-2011 at 03:36 AM.


  •  

    Posting Permissions

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