I am coding a site for a friend who wants an image slideshow on her homepage. I've written a function that requests an array and that should pull in the images at timed intervals. Here is a snippet of the default.js code.

Code:
var nImg = 0;

function slideShow(arr)
{
	// This changes the image
	var fullPath = document.getElementById('img').src;
	var lastnum = fullPath.lastIndexOf("/") + 1;
	var parentFolder = fullPath.slice(0, lastnum);
	var newImg = parentFolder + arr[nImg];
	document.getElementById('img').src = newImg;

	// This tests to see if it should loop back to the first image
	if (nImg == arr.length - 1)
	{ nImg = 0; }
	else
	{ nImg = nImg + 1; }
 
	var reset = setTimeout("slideShow(" + arr + ")", 6000);
}
Here is the snippet from the homepage that should call the function:

HTML Code:
<script type="text/javascript" runat="server">
	var arrHome = new Array("dress1.jpg", "dress2.jpg", "dress3.jpg", "dress4.jpg", "dress5.jpg", "dress6.jpg", "dress7.jpg");
	slideShow(arrHome);
</script>
However, the array will not pass through the function. If I create an array within default.js, it works fine. The problem lies with trying to pass in an array from the HTML. Granted, I could just work in the JS and not worry about the HTML. However, there are two problems:
  1. Once I've finished coding this site, I want my friend to manage it herself. I do NOT want her touching the JS.
  2. I would like to be able to use this script on several pages, using different arrays.

An alternate solution I've thought of is using JS to browse the contents of a directory and use any and all images located in that folder. I know I did this with PHP once; is there a similar code in JS?

Any help you could give me would be greatly appreciated.