Not sure how to have my transition looped

I have created a little project where theres an image slideshow (transition) where on the page load, image opacities are changed, to create a slideshow effect.

It works really well, however I'm interested in knowing how I can upgrade my code so that it just loops back to the start, so the slideshow is never ending, Help will be greatly appreciated, here is what I have tried already:

$(document).ready(function() {
    $("#image1").fadeTo(2000 , 0, function() {
        $("#image2").fadeTo(2000 , 1, function(){
            $("#image3").fadeTo(3000, 1, function(){

            });
        });
    });
});

http://jsfiddle.net/pYECC/4/

Heres a nice little solution - http://jsfiddle.net/pYECC/7/

$(document).ready(function() {
    var images = ["image1", "image2", "image3"];
    var x = 0;

    setInterval(function () {
        $("#" + images[x]).fadeOut(1000, function () {
            x++;
            if(x == 3)
                x = 0;
            $("#" + images[x]).fadeIn(1000);
        });
    }, 3000);  
});

With this you need to remove opacity from your CSS. You need to make images 2 & 3 display: none; by default.