4 rotating images on one page PHP and JS

I am displaying 4 images on my page from a directory (there are many more in the directory). I would like to rotate all of the images in the directory (preferably randomly but not necessarily as long as they don't display the same images at the same time), within the four boxes.


http://mercercountyrealtors.com/previewPurple/index4.php

Ideally, they would have a crossfade effect, but I haven't gotten there yet.

Right now this is the code I have, which I've stitched together, and it's not really working (actually, just plain not working).

<?php
    foreach (glob('featured_images/*.*') as $filename) { 
      $file[filemtime($filename)] = $filename;
          }
        krsort($file);
        for ($i=0; $i<=3; $i++) { 
                //get they key
                current($file);
                $num=$file[key($file)];
                //set target path for image
        $path = "featured" . $i . ".php";     
        //print $num."<br />";
        echo '<li><a href='.$path.'><img id="slideshow" style="width:180px; height:140px; padding: 3px;  margin:5px;     border: 1px solid #ccc;" src="'.$num.'" ></a></li>'; 
                next($file);
        }
?>	 	

<script language="javascript" type="text/javascript">
var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "featured_images/"+[curimg])
curimg=(curimg<$file.lenght-1)? curimg+1 : 0
}

window.onload=function(){
setInterval("rotateimages()", 2500)
}
</script>
 

PHP:

 

I would make an array with all the links to the pictures and shuffle the array. then just display array[0] array[1] array[2] array[3].

 

I need the images to be drawn from a directory. I have several pages that use the same images, and I don't want to enter the same image info several times.

I hope this clarifies a little.

Thanks