www.webdeveloper.com
Results 1 to 15 of 35

Thread: How to Loop Images in a webpage with an even delay?

Threaded View

  1. #1
    Join Date
    Jul 2008
    Posts
    9

    How to Loop Images in a webpage with an even delay?

    Hi,

    i have a requirement that i need to loop through a series of images(say 4 images) with an even inteval of time.

    I need the first image to come and after some 4 secnds the next image and then the next image.

    i used 'setTimeout and setInterval' both doesnt seems o be helping me out.

    So pls help me out.

    pls find the code that i ve written below:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body Onload="m();">
    
    <SCRIPT type="text/javascript">
    var pictureArchive= new Array(4);
    	pictureArchive[0]='1.jpg';
    	pictureArchive[1]='2.jpg';
    	pictureArchive[2]='3.jpg';
    	pictureArchive[3]='4.jpg';
    var secs
    var timerID = null
    var timerRunning = false
    var delay = 1000
    var j=0;
    function m()
    {
    	for (i=0;i<4;i++)
    	{
    		InitializeTimer();
    	}
    }
    
    function InitializeTimer()
    {
        // Set the length of the timer, in seconds
        secs = 2
        StopTheClock()
        StartTheTimer()
    }
    
    function StopTheClock()
    {
        if(timerRunning)
            clearTimeout(timerID)
        timerRunning = false
    }
    
    function StartTheTimer()
    {
        if (secs==0)
        {
            StopTheClock()
    \\ print the images here
            document.write("<img src='"+ pictureArchive[0] +"'/>");
    			
    	
        }
        else
        {
            self.status = secs
            secs = secs - 1
            timerRunning = true
            timerID = self.setTimeout("StartTheTimer()", delay)
    		
        }
    }
    //-->
    </SCRIPT>
    
    
    
    </body>
    </html>
    Last edited by Fang; 07-22-2008 at 06:03 AM.

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