<div id="container">
	<ul>
	<li><img src="picture1.jpg" width="604" height="453" /></li>
	<li><img src="picture2.jpg" width="604" height="453" /></li>
	<li><img src="picture3.jpg" width="604" height="453" /></li>
	</ul>
	<span class="button prevButton"></span>
	<span class="button nextButton"></span>
	</div>	
	  

	#container{
		width:604px;
		height:453px;
		position:relative;
	}

	#container ul{
		width:604px;
		height:453px;
		list-style:none outside none;
		position:relative;
		overflow:hidden;
	}
	  

	#container li:first-child{
		display:list-item;
		position:absolute;
	}

	#container li{
		position:absolute;
		display:none;
	}
	  

	#container .prevButton{
		height:72px;
		width:68px;
		position:absolute;
		background:url('buttons.png') no-repeat;
		top:50%;
		margin-top:-36px;
		cursor:pointer;
		z-index:2000;
		background-position:left top;
		left:0
	}

	#container .prevButton:hover{ 
			background-position:left bottom;left:0;}
	  

<script>
$(window).load(function(){
		var pages = $('#container li'), current=0;
		var currentPage,nextPage;

		$('#container .button').click(function(){
			currentPage= pages.eq(current);
			if($(this).hasClass('prevButton'))
			{

				if (current <= 0)
					current=pages.length-1;
				else
					current=current-1;
			}
			else
			{
				if (current >= pages.length-1)
					current=0;
				else
					current=current+1;
			}
			nextPage = pages.eq(current);	
			currentPage.hide();	
			nextPage.show();		
		});
});
</script>