Smooth transition for background-image script?

So I have a javascript that I found that finally works and changes my backgrounds. The thing is that the transition between the images is not smooth at all. Can someone help me out - I want a smooth transition, fade perhaps, between the images.

    <script type="text/javascript">

   var num;
   var temp=0;
   var speed=10000; 
   var preloads=[6];
preload(
        'images/bg-1.jpg',
        'images/bg-2.jpg',
        'images/bg-3.jpg',
        'images/bg-4.jpg',
        'images/bg-5.jpg',
        'images/bg-6.jpg',
        'images/bg-7.jpg',
        'images/bg-8.jpg',
        'images/bg-9.jpg',
        'images/bg-10.jpg',
        'images/bg-11.jpg',
        'images/bg-12.jpg',
        'images/bg-13.jpg'
       );

function preload(){

for(var c=0;c<arguments.length;c++) {
   preloads[preloads.length]=new Image();
   preloads[preloads.length-1].src=arguments[c];
  }
 }

function rotateImages() {
   num=Math.floor(Math.random()*preloads.length);
if(num==temp){
   rotateImages();
 }
else {
   document.body.style.backgroundImage='url('+preloads[num].src+')';
   temp=num;

setTimeout(function(){rotateImages()},speed);
  }
 }

if(window.addEventListener){
   window.addEventListener('load',rotateImages,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',rotateImages);
  }
 }
</script>