cycle2 with a folder as image-source

I'm setting up an iPad-Kiosk and need to cycle through images as a slide-show. Right now I use this very basic code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery.cycle2.min.js"></script>
  </head>
  <body>
  <div class="cycle-slideshow">
    <img src="img/01.jpg">
    <img src="img/02.jpg">
    <img src="img/03.jpg">
    <img src="img/04.jpg">
    <img src="img/05.jpg">
    <img src="img/06.jpg">
    <img src="img/07.jpg">
    <img src="img/08.jpg">
    <img src="img/09.jpg">
    <img src="img/10.jpg">
    <img src="img/11.jpg">
    <img src="img/12.jpg">
    <img src="img/13.jpg">
    </div>
  </body>
</html>

But what I really want is to autoload all image-files from a folder. How can I populate a list of image-file-names using ajax/jQuery? Sadly I cannot use php.

thanks!

Solution

var image=1;

function checkImage(src) {
     var img = new Image();
     img.onload = function() {
     $('.cycle-slideshow').cycle('add','<img src="'+src+'">');
        };
 img.src = src;
}

function appendImage(){
            if(image<=9) 
                image='0'+image;
            var src = 'img/' +image+ '.jpg';
            checkImage(src);
            image=parseInt(image)+1;
};

This is how I did it finally. One disadvantage of this solution is that I call appendImage() about 100 times and just pretend that there are no more images. In my project that's ok, because there won't be more images to load but its a very crude solution.