jquery/javascript image slide

I am working on a simple (at least i th开发者_JAVA百科ought it was) images slide for my website. I am very new to jquery and javascript so my script is probably a bit dodgy. Here's the code:

$(function() {

var images = ["images/animal_full_2.jpg","images/church_full_1.jpg", "images/city_full_2.jpg", "images/faith_full_1.jpg", "images/flower_full_2.jpg", "images/gloom_full_2.jpg"];

function swapImages()
    {

        images=0;
        $("#"+images).fadeOut(2000,function(){
            (this).attr('src',++images).fadeIn(2000,function(){
                setTimeout(swapImages(),2000)
            });


        });

    }

});

now, what I was trying to achieve was a slideshow so that the images in the array change at a regular interval and they they start again, but this is what happens as you can see (please note that by including the URL I am not trying to promote my site, but to simply show how the script isn't working): http://antobbo.webspace.virginmedia.com/photogallery/testscript/home.htm The images are all displayed on the home page. Does anybody have any suggestion as to how to get it working? thanks a lot

There are several things wrong with what you have so far, so maybe it will be easier for you to just see a working example. This should work with your document:

$(function() {
    var imgs = $('.home_page_pic img').hide(), index = 0;

    imgs.eq(index).show();

    function swapImages() {
      imgs.eq(index).fadeOut(2000, function(){

        index++;
        if (index == imgs.length) {
          index = 0;
        }
        imgs.eq(index).fadeIn(2000, swapImages);
      });
    }

    swapImages();
});