index.php

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<?php

    /** matches filenames with image extensions */
    $img_pattern = '/(png)|(jpg)|(gif)$/';

    /** array of filenames to be filled in */
    $filenames = array();

    /** open directory handle */
    if ($dir = opendir("./"))
    {
        /** read through filenames in directory */
        while (false !== ($filename = readdir($dir)))
        {
            if ( preg_match($img_pattern, $filename) )
            {
                $filenames[] = $filename;
            }
        }

        /** close directory handle */
        closedir($dir);
    }

?>
<html>
    <head>
        <script type="text/javascript"><!--
            var running = new Boolean(false)
            var delay = 4000 // milliseconds
            var pos = 0
            var tid

            function roll(obj, src)
            {
                obj.src=src
            }

            function first()
            {
                roll(document.slide, document.SlideShow.slides.options[0].value)
                document.SlideShow.slides.options[0].selected=true
                pos=0
            }

            function last()
            {
                pos=document.SlideShow.slides.options.length-1
                roll(document.slide, document.SlideShow.slides.options[pos].value)
                document.SlideShow.slides.options[pos].selected=true
            }

        function back()
        {
            if(pos>0)
            {
                roll(document.slide, document.SlideShow.slides.options[--pos].value)
                document.SlideShow.slides.options[pos].selected=true
            }
            else last()
        }

        function next()
        {
            if(pos<document.SlideShow.slides.options.length-1)
            {
                roll(document.slide, document.SlideShow.slides.options[++pos].value)
                document.SlideShow.slides.options[pos].selected=true
            }
            else first()
        }

        function play()
        {
            stop()
            running=true
            run()
        }

        function run()
        {
            next()
            if(pos<document.SlideShow.slides.options.length-1)
            {
                tid=setTimeout("run()", delay)
            }
            else stop()
        }

        function pause()
        {
            clearTimeout(tid)
        }

        function stop()
        {
            if(running) pause()
            running=false
        }
//-->
</script>
    </head>
    <body>
        <form name="SlideShow" onsubmit="return false;">
            <table>
                <tr>
                    <th>
                        <img name="slide" src="<?= $filenames[0] ?>" onclick="next()"
                             title="Click for next slide..."/>
                    </th>
                </tr>
                <tr>
                    <th>
                        <select name="slides" title="Choose Slide"
                                onchange="roll(document.slide, this.options[this.options.selectedIndex].value)">
                                <?php
                                    foreach ($filenames as $name)
                                    {
                                ?><option><?= $name ?></option>
                                <?php
                                    }
                                ?>
                        </select>
                        <button onclick="first()" title="First Slide"><tt>|&#60;</button>
                        <button onclick="back()" title="Previous Slide"><tt>&#60;&#60;</button>
                        <button onclick="next()" title="Next Slide"><tt>&#62;&#62;</button>
                        <button onclick="last()" title="Final Slide"><tt>&#62;|</button>
                        &#160;
                        <button onclick="play()" title="Play"><tt>&#62;</tt></button>
                        <button onclick="pause()" title="Pause"><tt>||</tt></button>
                        <button onclick="stop()" title="Stop"><tt>[]</tt></button>
                    </th>
                </tr>
            </table>
        </form>
    </body>
</html>