Making a jquery animation loop forever

Making a jquery animation loop forever

I have created an image slideshow using jQuery where 5 images appear one
after another during an interval of 25 seconds. Each images stays on for 5
seconds before fading out and then the next image fades in. The slideshow
works fine but I want it to loop forever i.e. after the last image fades
out, it should again go back and start the animation from the first image.
I tried using setInterval but couldn't succeed. Here's the working example
of the slideshow which I've coded:
JSfiddle
Here's the complete code:
HTML:
<img id="img2"
src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-1.jpg"
style="display: block; width: 50%; position: absolute;" />
<img id="img3"
src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-2.jpg"
style="display: block; width: 50%; position: absolute;" />
<img id="img4"
src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-3.jpg"
style="display: block; width: 50%; position: absolute;" />
<img id="img5"
src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-4.jpg"
style="display: block; width: 50%; position: absolute;" />
Javascript:
$(document).ready(function(){
$("#img2,#img3,#img4,#img5").hide();
setTimeout(function(){
$("#img1").fadeOut("slow", function () {
});
}, 5000);
setTimeout(function(){
$("#img2").fadeIn("slow", function () {
});
}, 5000);
setTimeout(function(){
$("#img2").fadeOut("slow", function () {
});
}, 10000);
setTimeout(function(){
$("#img3").fadeIn("slow", function () {
});
}, 10000);
setTimeout(function(){
$("#img3").fadeOut("slow", function () {
});
}, 15000);
setTimeout(function(){
$("#img4").fadeIn("slow", function () {
});
}, 15000);
setTimeout(function(){
$("#img4").fadeOut("slow", function () {
});
}, 20000);
setTimeout(function(){
$("#img5").fadeIn("slow", function () {
});
}, 20000);
setTimeout(function(){
$("#img5").fadeOut("slow", function () {
});
}, 25000);
});