[jQuery]Slider galeria

<style type="text/css">
.botones{padding:5px 7px 5px 7px;background-color:#000;cursor:pointer;color:#fff;}
.botones:hover{background-color:#ae4444;color:yellow;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>$(document).ready(function(){
//Script por adan-2994.es.tl
var tiempo=500;//esta variable es el tiempo que dura en aparecer la nueva imagen
var cuenta=1;//esta variable es importante no tokarla a menos que sepas
//Parte 1
/*Esta variable img e utiliza para precargar las imagenes*/
var img1=new Image();var img2=new Image();var img3=new Image();var img4 =new Image();
img1.src="http://s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif";
img2.src="http://s0.2mdn.net/3161456/PID_1603377_backup.jpg";
img3.src="http://i3.ytimg.com/vi/FEFI-_Sg5G0/default.jpg";
img4.src="http://i1.ytimg.com/vi/LYKjC3U_FtI/default.jpg";
//Parte 2
/*Esta variable imag guarda la direccion de las imagenes si quieres agregar otra recuerda agregar tambien su enlace y el titulo*/
var imag=new Array();
imag[1]="http://i1.ytimg.com/vi/Xu7FRTd3Jg8/default.jpg";
imag[2]="http://s0.2mdn.net/3161456/PID_1603377_backup.jpg";
imag[3]="http://i3.ytimg.com/vi/FEFI-_Sg5G0/default.jpg";
imag[4]="http://i1.ytimg.com/vi/LYKjC3U_FtI/default.jpg";
var total=imag.length;//total es igual al numero de imagenes, empezando contando 0 tenemos 5
//Parte 3
var href=new Array();//variable para los enlaces, por cada imagen que tengas es necesario un enlace
href[1]="#tuenlace1";
href[2]="#tuenlace2";
href[3]="#tuenlace3";
href[4]="#tuenlace4";
//Parte 4
var titulo=new Array()//Estos son los titulos de las imagenes
titulo[1]="Haz ejercicio";
titulo[2]="Erase una vez...";
titulo[3]="Paletas de limon";
titulo[4]="...Y tu que piensas";

var pro=$("#proyector");
var url=$("#enlace");

function cambiaimagen(n){
if(n==undefined){
if(cuenta<total-1){//Si cuenta es menor a total-1 (recuerda que se cuenta desde 0 por eso resto 1) el valor cuenta se incrementa
cuenta++;
}else{cuenta=1;//si cuenta no era menor a total-1 entonces lo regresamos a 1 para que se vuelva a repetir
}
pro.animate({"opacity":0},tiempo,function(){pro.attr("src",imag[cuenta]);pro.animate({"opacity":1},tiempo);});url.attr("href",href[cuenta]);$("#titulo").html(titulo[cuenta]);
}else{
pro.animate({"opacity":0},tiempo,function(){pro.attr("src",imag[n]);pro.animate({"opacity":1},tiempo);});url.attr("href",href[n]);$("#titulo").html(titulo[n]);
}
}


bucle=setInterval(function(){cambiaimagen();},(tiempo+2500));//ala variable tiempo (500) le sumo 2500 para obtener 3000=3seg modifica a tu gusto

var estado=true;

$(".botones").click(function(){
var id=parseInt($(this).attr("id"));
cambiaimagen(id);estado=false;
$("#control").html("Reanudar");
espera();
});

function espera(){
if(estado==false){
window.clearInterval(bucle);
}else{bucle=setInterval(function(){cambiaimagen();},(tiempo+2500));}
}

$("#control").click(function(){
if($("#control").text()=="Reanudar"){$("#control").text(">>");estado=true;espera();}

});
pro.mouseenter(function(){$("#titulo").stop().animate({"opacity":0},tiempo);}).mouseleave(function(){$("#titulo").stop().animate({"opacity":1},tiempo);});


});</script>

<div id="madreslider" style="width:540;">
<div id="titulo" style="background-color:rgba(0, 0, 0, 0.5);position:relative;width:130px;top:20px;font-weight:bold;padding-left:12px;color:yellow;z-index:1;">Slide</div>
<a id="enlace" href="#primera" ><img id="proyector" src="http://i1.ytimg.com/vi/Xu7FRTd3Jg8/default.jpg" width="300px" height="100px" ></a><p>

<!--Parte 5-->
<a id="control" class="botones">>></a>
<a id="1" class="botones" style="">1</a>
<a id="2" class="botones" style="">2</a>
<a id="3" class="botones" style="">3</a>
<a id="4" class="botones" style="">4</a>

</div>