HTML

<div id="slide-show">
     <ul id="slide-images">
     	<li><img src="images/one.jpg" alt="One" title="One" /></li>
     	<li><img src="images/two.jpg" alt="Two" title="Two" /></li>
     	<li><img src="images/three.jpg" alt="Three" title="Three" /></li>
     </ul>
</div>

CSS

#slide-images{
	position:relative;
	display:block;
	margin:0px;
	padding:0px;
	width:290px; /* Adjust to width-height of your images */
	height:142px;
	overflow:hidden;
}

#slide-images li{
	position:absolute;
	display:block;
	list-style-type:none;
	margin:0px;
	padding:0px;
	background-color:#FFFFFF;
}

#slide-images li img{
	display:block;
	background-color:#FFFFFF;
}

JS

var delay = 1000;
var start_frame = 0;

function init() {
	var lis = $('slide-images').getElementsByTagName('li');
	
	for( i=0; i < lis.length; i++){
		if(i!=0){
			lis[i].style.display = 'none';
		}
	}
	end_frame = lis.length -1;
	
	start_slideshow(start_frame, end_frame, delay, lis);
	
	
}



function start_slideshow(start_frame, end_frame, delay, lis) {
	setTimeout(fadeInOut(start_frame,start_frame,end_frame, delay, lis), delay);
}


function fadeInOut(frame, start_frame, end_frame, delay, lis) {
	return (function() {
		lis = $('slide-images').getElementsByTagName('li');
		Effect.Fade(lis[frame]);
		if (frame == end_frame) { frame = start_frame; } else { frame++; }
		lisAppear = lis[frame];
		setTimeout("Effect.Appear(lisAppear);", 0);
		setTimeout(fadeInOut(frame, start_frame, end_frame, delay), delay + 1850);
	})
	
}


Event.observe(window, 'load', init, false);

You also need the following javascript files... prototype.js, scriptaculous.js, effects.js

Just load the js above in your head and it'll start slidin'

Credits: Andrew Sellick - http://www.andrewsellick.com/30/simple-javascript-slide-show-using-scriptaculous