0

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...

14
Contributors
15
Replies
81
Views
9 Years
Discussion Span
Last Post by diafol
Featured Replies
0

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>
Votes + Comments
Thanks very much
0

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

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

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>
0

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

3

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

5

actually you can just use XMLRequest through the JQUERY library

0

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

0

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

0

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

0

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 ??????

1

Look at the browser console window to see what the error could be.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.