Untitled

<html>
    <head>
            <title>Find & Replace</title>
            <style>
                /*hide the slides*/
                #slideshow li
                {
                    display:none;
                }
                body
                {
                    overflow:hidden;
                }
                #canvas
                {
                    width:1000px;
                    margin:auto;
                }
            </style>

            <script type="text/javascript">

                var currentSlide = 0;
                var maxSlides = 1303;
                var FPS = 8;
                var timeout = Math.floor(500/FPS);
                function loadNextSlide()
                {
                    currentSlide = currentSlide > (maxSlides-1) ? 1 : currentSlide+1;
                    //console.log("Next Index: " + currentSlide);

                    blitImageToCanvas('image_'+currentSlide);


                    setTimeout(loadNextSlide,timeout);
                }

                function blitImageToCanvas(imageID)
                {
                    var image = document.getElementById(imageID);
                    var canvas = document.getElementById("myCanvas");

                    var ctx = canvas.getContext('2d');
                    ctx.drawImage(image,0,0);

                }

                function onLoad()
                {
                    loadNextSlide();
                }
            </script>

    </head>
    <body onload="onLoad();">
        <body style="background-color:black">
        <!-- canvas is the same size as the images, and all the images are the same size -->
        <div id="canvas">
        <canvas id="myCanvas" width="1000" height="600"></canvas>
        </div>
        <!--
         Imporant that the images have ids with numbers, as we're not using jquery. to keep things simple.
        -->
        <div id="slideshow">
            <ul class="slides">
                <li><img id='image_1' src="images/1.jpg" width="1000" height="600"/></li>
                <li><img id='image_2' src="images/2.jpg" width="1000" height="600"/></li>
                <li><img id='image_3' src="images/3.jpg" width="1000" height="600"/></li>
                <li><img id='image_4' src="images/4.jpg" width="1000" height="600"/></li>
                <li><img id='image_5' src="images/5.jpg" width="1000" height="600"/></li>
                <li><img id='image_6' src="images/6.jpg" width="1000" height="600"/></li>
                <li><img id='image_7' src="images/7.jpg" width="1000" height="600"/></li>
                <li><img id='image_8' src="images/8.jpg" width="1000" height="600"/></li>
                <li><img id='image_9' src="images/9.jpg" width="1000" height="600"/></li>
//              ad infinitum
            </ul>
        </div>
    </body>
</html>