Slider Automatico Jquery (AYUDA)

Hola a todos como estan? Tengo este codigo con jquery,tengo que agregar al pie del slider unos cuadraditos o circulos tipicos de los sliders,uno por cada imagen y que se vaya moviendo a medida que se cambia la imagen: es decir imagen1 y se muestre el cuadradito 1 y asi sucesivamente, he buscado muchisimos ejemplos pero no he encontrado uno puntual asi,si alguien sabe que codigo agregar o algun ejemplo puntual, se lo agradezco

Aca esta el codigo completo para que pueden verlo,faltan solos las 3 imagenes y archivo jquery normal,saludos

Código

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
 
	$(document).ready(function(){
 
		function animacion(){
			$("#texto3").slideDown(4000, function(){
				$("#texto3").css("display", "none")
				$("#texto2").slideDown(4000, function(){
					$("#texto2").css("display", "none")
					$("#texto1").slideDown(4000, function(){
						$("#texto1").css("display", "none")
 
			})})});
 
			$("#foto3").animate({"left": "+=600px"}, 4000, function(){
				$("#foto2").animate({"left": "+=600px"}, 4000, function(){
					$("#foto1").animate({"left": "+=600px"}, 4000, function(){
						$("#foto3").css("left", "0")
						$("#foto2").css("left", "0")
						$("#foto1").css("left", "0")
 
						animacion();
			})})});
		}
		animacion();
 
	});
</script>
<style type="text/css">
	#imagenes{
		width: 600px;
		height: 450px;
		border: 1px solid grey;
		position: relative;
		overflow: hidden;
		background-image: url(foto1.jpg)
	}
	#foto1, #foto2, #foto3{
		display: block;
		position: absolute;
	}
	#texto1, #texto2, #texto3{
		display: none;
		position: absolute;
		text-align: center;
		width: 600px;
		height: 30px;
		padding-top: 10px;
		vertical-align: bottom;
		background-color: #000000;
		color: #FFFFFF;
		opacity: 0.3;
		filter: alpha(opacity=30);
	}
 
</style>
</head>
 
<body>
<h2>Slider</h2>
<div id="imagenes">
    <img src="foto3.jpg" id="foto1" />
    <img src="foto2.jpg" id="foto2" />
    <img src="foto1.jpg" id="foto3" />
    <div id="texto1">Esta es la descripcion de la foto 1</div>
    <div id="texto2">Esta es la descripcion de la foto 2</div>
    <div id="texto3">Esta es la descripcion de la foto 3</div>
 
</div>
</body>
</html>