<div style="position:relative;">
  <img src="pic1.jpg" id="pic1" style="position:absolute;"/>
  <img src="pic2.jpg" id="pic2" style="position:absolute;display:none;"/>
  <img src="pic3.jpg" id="pic3" style="position:absolute;display:none;"/>
</div>	
	
<script language='JavaScript' type='text/javascript'>	

$(document).ready(function() {
	setInterval("toggleImages(new Array('#pic1', '#pic2', '#pic3'))", 8000);
});	
	
function toggleImages(picIds) {
	for (i=0; i<= picIds.length - 1;i++) {
		if($(picIds[i]).css('display') != 'none') {
			$(picIds[i]).fadeOut(1500);
			if (i < picIds.length - 1) {
				j = i + 1;
			} else {
				j = 0;
			}
			$(picIds[j]).fadeIn(1500);
			break;
		}		
	}
}	
</script>