Hi, everybody,
How to change the images after every 5 seconds in html??????
The images should display in the same places for every 5 seconds?????
can anybody send me code please....

i posted this thread in HTML forum somebody told me that post here so please help anybody

And Advanced thanks...

This will give you the basic functionality:

<!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>
<script language="javascript" type="text/javascript">
var timerid = 0;
var images = new Array(	"image1.jpg",
			"image2.jpg",
			"image3.jpg");
var countimages = 0;
function startTime()
{
	if(timerid)
	{
		timerid = 0;
	}
	var tDate = new Date();
	
	if(countimages == images.length)
	{
		countimages = 0;
	}
	if(tDate.getSeconds() % 5 == 0)
	{
		document.getElementById("img1").src = images[countimages];
	}
	countimages++;
	
	timerid = setTimeout("startTime()", 1000);
}
</script>
</head>

<body onload="startTime();">
<img id="img1" src="image3.jpg" />
</body>
</html>
Comments
Thanks very much

I would change countimages++; inside the brakets...

if(tDate.getSeconds() % 5 == 0)
    {
        document.getElementById("img1").src = images[countimages];
        countimages++;
    }

I am by no means a JavaScript expert..., but here is a shorter version of the example provided above producing a very similar result. Any feedback on this approach is welcomed!...

<!DOCTYPE html>
<html>
<head>
  <title>Demo</title>
</head>
<body onload="startTime();">
<img id="img1" />

<script>
var imgArray = new Array("images/1.png","images/2.png","images/3.png");
var imgCount = 0;
function startTime() {

    if(imgCount == imgArray.length) {
        imgCount = 0;
    }

    document.getElementById("img1").src = imgArray[imgCount];
    imgCount++;

    setTimeout("startTime()", 5000);
}
</script>
</body>
</html>

Hello,

I'm new at this and want to add this to my site.

TOPIC: Location of Images/Files Being Display

My questions is: In either of the two sets of codes provided, WHAT IS THE LOCATION OF THE IMAGES? In other words, where am I suppossed to put them AND what is the function in the code calling for the location of the images?

Thank you,

ikarz

Obviously refrence your input elements in js the use the setTimeOut() function to specify the time in milliseconds (thousandths of a second) in time

actually you can just use XMLRequest through the JQUERY library

<body onload="startTime();"> <img id="img1" src="images/1.png" width="999" height="478" id="bigImage" />

Hi, everybody,
How to create a hide calender. when i click show the calender and when i click anywhere on the webpage again calender will be hide .....
can anybody send me code please....
Thankyou so much in advance

Hello, it seems to me that you want something like carousel, if yes then try with bootstrap carousel, it is same as you want, thank

hi,

this code is not running on notepad @window 10.... is there is any problem in os or some error is droped from my side ??????

This question has already been answered. Start a new discussion instead.