duda Slider jQuery

[marcvilap]

Buenas compañeros tengo una duda con un slider.

Quiero mostrar imagenes de varios trabajos en mi HOME i creo que un slider es la mejor solución. Lo que quiero es un Slider que te permita ver todas las imagenes sin necesidad de pasar todo el slider ( por ejemplo, si quiero ver la imagen 7 que me corra directamente hasta esta). Este punto está solucionado con los botones id=segona, id=tercer id=quarta id=cinquena y id=primera . Se muestra en éste código:

$("#segona").click(function(evento){$("#secuencia").animate( {opacity:0.1}, 700,function(evento)
{$("#secuencia").animate({top: "-301px"}, 800,function(evento)
{$("#secuencia").animate({opacity:0.9}, 700);});})});

$("#tercer").click(function(evento){$("#secuencia").animate( {opacity:0.1}, 700,function(evento)
{$("#secuencia").animate({top: "-602px"}, 800,function(evento)
{$("#secuencia").animate({opacity:0.9}, 700);});})});

$("#quarta").click(function(evento){$("#secuencia").animate( {opacity:0.1}, 700,function(evento)
{$("#secuencia").animate({top: "-903px"}, 800,function(evento)
{$("#secuencia").animate({opacity:0.9}, 700);});})});

$("#cinquena").click(function(evento){$("#secuencia").animate( {opacity:0.1}, 700,function(evento)
{$("#secuencia").animate({top: "-1206px"}, 800,function(evento)
{$("#secuencia").animate({opacity:0.9}, 700);});})});

$("#primera").click(function(evento){$("#secuencia").animate( {opacity:0.1}, 700,function(evento)
{$("#secuencia").animate({top: "0px"}, 800,function(evento)
{$("#secuencia").animate({opacity:0.9}, 700);});})});

El problema es que también quiero que este Slider, en el caso que el usuario no haga click encima de ningun boton vaya pasando las imagenes de manera automática.

He probado con este codigo para solucionar el tema

$("#secuencia").animate({opacity:0.1},1700,functio n(evento){ $("#secuencia").animate({top:-301}, 1800,function(evento){ $("#secuencia").animate({opacity:0.9},t,function(e vento){ $("#secuencia").animate({opacity:0.1},t,function(e vento){ $("#secuencia").animate({top:-602}, 1800,function(evento){ $("#secuencia").animate({opacity:0.9},t,function(e vento){ $("#secuencia").animate({opacity:0.1},t,function(e vento){ $("#secuencia").animate({top:-903}, 800,function(evento){ $("#secuencia").animate({opacity:0.9},t,function(e vento){ $("#secuencia").animate({opacity:0.1},t,function(e vento){ $("#secuencia").animate({top:-1206}, 800,function(evento){ $("#secuencia").animate({opacity:0.9},t,function(e vento){ $("#secuencia").animate({opacity:0.1},t,function(e vento){ $("#secuencia").animate({top:0}, 800,function(evento){ $("#secuencia").animate({opacity:0.9},t);});});}); });});});});});});});});});});});

Lo que hace es que cuando se cargue la página muestre todo el carusel entero de manera automática, de principio a fin.

Pero el problema es que si el usuario hace click en uno de los botones, para seleccionar una imagen en concreto, lo que passa es que la web acaba la segunda funión ( muestra todo el carrusel) y despues muestra la imagen seleccionada.

Soy algo novato en jQuery y me gustaría saber si hay alguna función que me permite detener esta segunda función cuando se haga click en algun de los botones, o si es mejor enfocar el problema de otra manera.

Gracias por todo

Marc