www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 35

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

  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.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>rotate</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    var pictureArchive= ['1.jpg','2.jpg','3.jpg','4.jpg'];
    
    window.onload=function() {
    var o=document.createElement('img');
    o.setAttribute('id', 'image');
    o.setAttribute('src', pictureArchive[0]);
    o.setAttribute('alt', '');
    document.body.appendChild(o);
    rotate(pictureArchive.length);
    }
    
    function rotate(idx) {
    if(idx>=pictureArchive.length) {
    	idx=0;
        }
    document.getElementById('image').src=pictureArchive[idx++];
    timerID=setTimeout('rotate('+idx+')', 4000);
    }
    </script>
    
    <style type="text/css">
    </style>
    
    </head>
    <body>
    </body>
    </html>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Jul 2008
    Posts
    9
    but it does not show any image.

    just a blank page is getting displayed

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Are the image names and paths correct? Case is important.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Jul 2008
    Posts
    9
    but it does not show any image.

    just a blank page is getting displayed

  6. #6
    Join Date
    Jul 2008
    Posts
    9
    yes! but what does document.getElementById('image').src=pictureArchive[idx++]; function do?

  7. #7
    Join Date
    Jul 2008
    Posts
    9
    when i run in it a browser, i actuall get an error sayin that this fn is eiter nul or this is not an object.

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    If your image names and paths are correct and the document has not been altered the images will rotate.

    This statement changes the image being displayed.
    Code:
    document.getElementById('image').src=pictureArchive[idx++];
    At least 98% of internet users' DNA is identical to that of chimpanzees

  9. #9
    Join Date
    Jul 2008
    Posts
    9
    all the images reside inn the same directory of my HTMl file.
    is that the path?rite?

  10. #10
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Are the image extensions correct: 1.jpg not 1.JPG
    At least 98% of internet users' DNA is identical to that of chimpanzees

  11. #11
    Join Date
    Jul 2008
    Posts
    9
    yes. correct. Still it doesn work

  12. #12
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The document I gave was tested in 3 browsers and works.
    Can you give a link?
    At least 98% of internet users' DNA is identical to that of chimpanzees

  13. #13
    Join Date
    Jul 2008
    Posts
    9
    i am using Dreamweaver as the tool for the creation.

    the code is:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>rotate</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <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';
    
    window.onload=function() {
    var o=document.createElement('img');
    o.setAttribute('id', 'image');
    o.setAttribute('src', pictureArchive[0]);
    alert (pictureArchive[0].src);
    o.setAttribute('alt', '');
    document.body.appendChild(o);
    rotate(pictureArchive.length);
    }
    
    function rotate(idx) {
    if(idx>=pictureArchive.length) {
    	idx=0;
        }
    document.getElementById('image').src=pictureArchive[idx++];
    //document.write("<img src='" + pictureArchive[idx++] +"'/>");
    timerID=setTimeout('rotate('+idx+')', 4000);
    }
    </script>
    
    <style type="text/css">
    </style>
    
    </head>
    <body>
    
    </body>
    </html>

    when in just use msgbox for the pictureArchive.src, it says 'undfined';


    any suggestions?

  14. #14
    Join Date
    Jul 2008
    Posts
    9
    it works buddy. it works fine now.

    Now how can i use this code to display any HTML instead of image? is there any way?
    can v use HTML inside a HTML doc?

  15. #15
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    You can create any element(s) you want using the DOM

    Content you write using JavaScript will no be seen by JavaScript disabled browsers.
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 4 users browsing this thread. (0 members and 4 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