function theRotator() {
 $('.rotator_1 ul li').css({opacity: 0.0});  //Set the opacity of all images to 0
 $('.rotator_1 ul li:first').css({opacity: 1.0}); //Get the first image and display it (gets set to full opacity)
 $('.rotator_2 ul li').css({opacity: 0.0});  //Set the opacity of all images to 0
 $('.rotator_2 ul li:first').css({opacity: 1.0}); //Get the first image and display it (gets set to full opacity)
 $('.rotator_3 ul li').css({opacity: 0.0});  //Set the opacity of all images to 0
 $('.rotator_3 ul li:first').css({opacity: 1.0}); //Get the first image and display it (gets set to full opacity)
 setInterval('rotate()',6000);  //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
} 
 
function rotate() { 
 var current = ($('.rotator1 ul li.show')?  $('.rotator1 ul li.show') : $('.rotator1 ul li:first'));  //Get the first image
 var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('.rotator1 ul li:first') :current.next()) : $('.rotator1 ul li:first'));  //Get next image, when it reaches the end, rotate it back to the first image
 next.css({opacity: 0.0}) //Set the fade in effect for the next image, the show class has higher z-index
 .addClass('show')
 .animate({opacity: 1.0}, 3000); 
 current.animate({opacity: 0.0}, 3000) //Hide the current image
 .removeClass('show'); 
 
 var current = ($('.rotator2 ul li.show')?  $('.rotator2 ul li.show') : $('.rotator2 ul li:first'));  //Get the first image
 var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('.rotator2 ul li:first') :current.next()) : $('.rotator2 ul li:first'));  //Get next image, when it reaches the end, rotate it back to the first image
 next.css({opacity: 0.0}) //Set the fade in effect for the next image, the show class has higher z-index
 .addClass('show')
 .animate({opacity: 1.0}, 3000); 
 current.animate({opacity: 0.0}, 3000) //Hide the current image
 .removeClass('show');
 
 var current = ($('.rotator3 ul li.show')?  $('.rotator3 ul li.show') : $('.rotator3 ul li:first'));  //Get the first image
 var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('.rotator3 ul li:first') :current.next()) : $('.rotator3 ul li:first'));  //Get next image, when it reaches the end, rotate it back to the first image
 next.css({opacity: 0.0}) //Set the fade in effect for the next image, the show class has higher z-index
 .addClass('show')
 .animate({opacity: 1.0}, 3000); 
 current.animate({opacity: 0.0}, 3000) //Hide the current image
 .removeClass('show');
};