1. Add a list of photo into html div

<!-- slider -->
<div class="slide">

	<ul id="gallery">
		<li><a href="img/0.jpg"><img src="img/0.jpg" /></a></li>
		<li><a href="img/1.jpg"><img src="img/1.jpg" /></a></li>
		<li><a href="img/2.jpg"><img src="img/2.jpg" /></a></li>
	</ul>
	
</div>

2. Hide all other image once page is loaded

$(function(){
	$("#gallery li:not(:first)").hide();
});

3. Method 1, fade out the top element and append it to bottom

$('#gallery li:first').fadeOut('slow',function(){
	$(this).remove().appendTo('#gallery').hide();
	$('#gallery li:first').fadeIn('slow');
});

4. Method 2, having a counter variable and fade in / out certain element

$(function(){
	$("#gallery li:not(:first)").hide();
	
	currentIndex = 0;
	noOfItems = $('#gallery li').length;
});

function changeItem(targetItemIndex){
	targetItemIndex = (typeof targetItemIndex !== 'undefined' ? a : ((currentIndex+1) % noOfItems));
	
	$('#gallery li').eq(currentIndex).fadeOut('slow',function(){		
		$('#gallery li').eq(targetItemIndex).fadeIn('slow');
		currentIndex = targetItemIndex;
	});
}