Looping JPG images

How do I make a static jpg image on a web page change automatically to a different image every 5 or 6 seconds?<br />
<br />
Thx in advance<!--content-->Here is an easy way.<br />
<br />
<html><br />
<head><br />
<script><br />
/*<br />
* (C) 2000 <!-- w --><a class="postlink" href="http://www.CodeLifter.com">www.CodeLifter.com</a><!-- w --><br />
* <!-- m --><a class="postlink" href="http://www.codelifter.com">http://www.codelifter.com</a><!-- m --><br />
* Free for all users, but leave in this header<br />
*/ <br />
//Set speed (milliseconds)<br />
var speed = 1000<br />
<br />
var Pic = new Array() <br />
<br />
//Change these<br />
Pic[0] = '1.jpg'<br />
Pic[1] = '2.jpg'<br />
Pic[2] = '3.jpg'<br />
Pic[3] = '4.jpg'<br />
Pic[4] = '5.jpg'<br />
<br />
<br />
var t<br />
var j = 0<br />
var p = Pic.length<br />
<br />
var preLoad = new Array()<br />
for (i = 0; i < p; i++){<br />
preLoad = new Image()<br />
preLoad.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/Pic">http://www.htmlforums.com/archive/index.php/Pic</a><!-- m --><br />
}<br />
<br />
function runSlideShow(){<br />
document.images.SlideShow.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/preLoad">http://www.htmlforums.com/archive/index.php/preLoad</a><!-- m -->[j].src<br />
j = j + 1<br />
if (j > (p-1)) j=0<br />
t = setTimeout('runSlideShow()', speed)<br />
}<br />
<br />
</script><br />
</head><br />
<!-- body tag --> <br />
<body onload="runSlideShow()"> <br />
<br />
<br />
<!-- HTML in your page --><br />
<table border="0" cellpadding="0" cellspacing="0"><br />
<tr><br />
<td id="VU" height=150 width=150><br />
<img src=http://www.htmlforums.com/archive/index.php/"1.jpg" name='SlideShow' width=150 height=150></td><br />
</tr><br />
</table><br />
</body><br />
<html><br />
just change the image sources. And put the HTML where you want it in the page.<!--content-->
 
Back
Top