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

**AP17758** · 07-22-2008 05:51 AM

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>

**Fang** · 07-22-2008 06:36 AM

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>

**AP17758** · 07-22-2008 06:47 AM

but it does not show any image.

just a blank page is getting displayed

**Fang** · 07-22-2008 06:51 AM

Are the image names and paths correct? Case is important.

**AP17758** · 07-22-2008 06:52 AM

but it does not show any image.

just a blank page is getting displayed

**AP17758** · 07-22-2008 06:53 AM

yes! but what does document.getElementById('image').src=pictureArchive[idx++]; function do?

**AP17758** · 07-22-2008 06:55 AM

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.

**Fang** · 07-22-2008 06:58 AM

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++];

**AP17758** · 07-22-2008 07:01 AM

all the images reside inn the same directory of my HTMl file.
is that the path?rite?

**Fang** · 07-22-2008 07:22 AM

Are the image extensions correct: 1.jpg not 1.JPG

**AP17758** · 07-22-2008 07:26 AM

yes. correct. Still it doesn work

**Fang** · 07-22-2008 07:41 AM

The document I gave was tested in 3 browsers and works.
Can you give a link?

**AP17758** · 07-22-2008 07:48 AM

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?

**AP17758** · 07-22-2008 07:52 AM

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?

**Fang** · 07-22-2008 08:02 AM

You can create any element(s) you want using the DOM

Content you write using JavaScript will no be seen by JavaScript disabled browsers.

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

Thread Tools

Display

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

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions