I'm having trouble passing a PHP array to Javascript

I'm using PHP and javascript to create a banner function. All of my images are in the folder Images/banners, and are being dynamically added by PHP, and then added to theJavaScript array "adImages". That part is working fine, as I can see the array in the JavaScript when I viewsouce. However, the images are not being placed on the page.

Here is my code, what am I missing?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Rotating Banners</title>
    <?php
    $dir = 'Images/banner';
    $files = scandir($dir);
    array_shift($files);
    array_shift($files);
?>
<script language="Javascript" type="text/javascript">

    // Setting variables
    dir = Images/banner/
    adImages = <?php echo json_encode($files); ?>;
    thisAd = 0
    imgCt = adImages.length

    // Rotate function

    function rotate() {
if (document.images) {
thisAd++
if (thisAd == imgCt) {
thisAd = 0
}


document.adBanner.src=dir+adImages[thisAd]
setTimeout("rotate()", 1 * 1000)
}
}

</script>
</head>
<body onload="rotate()">
<center>
<img src="" name="adBanner" alt="Ad Banner" />
</center>
</body>
</html>

Solution

Seems to work for me after making your dir var a string. Using your Chrome Developer Tools / Console pointed the errors out for you. The following code works for me with two sample images:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Rotating Banners</title>
    <?php
    $dir = 'Images/banner';
    $files = scandir($dir);
    array_shift($files);
    array_shift($files);
?>
<script language="Javascript" type="text/javascript">

    // Setting variables
    var dir = "Images/banner/",
        adImages = <?php echo json_encode($files); ?>,
        thisAd = 0,
        imgCt = adImages.length;

    // Rotate function

    function rotate() {
if (document.images) {
thisAd++
if (thisAd == imgCt) {
thisAd = 0
}


document.adBanner.src=dir+adImages[thisAd]
setTimeout("rotate()", 1 * 1000)
}
}

</script>
</head>
<body onload="rotate()">
<center>
<img src="" name="adBanner" alt="Ad Banner" />
</center>
</body>
</html>