//-----HTML------------------------------------------------->
       
<div id="headouter"><div id="headinner"></div></div>



//-------JQUERY---------------------------------------------->
$(document).ready(function(){
               var imgArr = new Array( // relative paths of images
                'images/headmain5.jpg',
                'images/headmain3.jpg',
                'images/headmain4.jpg',
                'images/headmain2.jpg'
                );

               var preloadArr = new Array();
               var i;
               /* preload images */
               for(i=0; i < imgArr.length; i++){
               preloadArr[i] = new Image();
               preloadArr[i].src = imgArr[i];
               }
			   
			   var inner = $('#headinner');
			   var outer = $('#headouter');
			   
			   inner.css('background', '#fff url("images/headmain5.jpg") no-repeat');
			   outer.css('background', '#fff url("images/headmain3.jpg") no-repeat');

               var currImg = 2;
               var intID = setInterval(changeImg, 5000);
			   
			    function changeImg() {
					 if(inner.is(':visible')) {
					      var count = currImg++%preloadArr.length;					  
					      var imgSrc = preloadArr[count].src;
						  inner.fadeOut('slow', function(){
							 inner.css('background', '#fff url('+imgSrc+') no-repeat');
						  });
					 } else {
					       var count = currImg++%preloadArr.length;
					       var imgSrc = preloadArr[count].src;
						   inner.fadeIn('slow', function(){
							outer.css('background', '#fff url('+imgSrc+') no-repeat');
						 });
					}
			   }
			   
			  
           });

Creates  rotating background images with a smooth transition.

rotating background images

image, jquery, images, background

jQuery