Carrusel de imagenes propio [Problema]

[roal40]

Buenas, estoy creando un carrusel, y tengo un problema, no encuentro el porqué no funciona, aquí os dejo un ejemplo de uno de los botones:

En el head:

Código HTML:

<script src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
	$("#izq").click(function () {
		if(document.getElementById("foto1").style.display = "block"){
      $("#foto1").hide("slide", { direction: "right" });
	  $("#foto3").show("slide", { direction: "right" });
		}
		if(document.getElementById("foto2").style.display = "block"){
      $("#foto2").hide("slide", { direction: "right" });
	  $("#foto1").show("slide", { direction: "right" });
		}
		if(document.getElementById("foto3").style.display = "block"){
      $("#foto3").hide("slide", { direction: "right" });
	  $("#foto2").show("slide", { direction: "right" });
		}
});
	</script> 

En el body:

Código HTML:

<div class="contenido">
<div class="fotocontenido">
<img src="css/img/01.jpg" id="foto1" style="display:block;" width="100%" height="100%">
<img src="css/img/02.jpg" id="foto2" style="display:none;" width="100%" height="100%">
<img src="css/img/03.jpg" id="foto3" style="display:none;" width="100%" height="100%">
</div>
<div class="controladora">
<div class="flechas">
<a href="#" id="izq"><img src="css/img/flecha-izq.png" class="foto"/></a>
<a href="#" id="der"><img src="css/img/flecha-top.png" style="margin-top:-48px; position:absolute" class="foto"/></a>
<a href="#" id="bot"><img src="css/img/flecha-bot.png" style="margin-top:48px; position:absolute" class="foto"/></a>
<a href="#" id="top"><img src="css/img/flecha-der.png" style="margin-left:48px; position:relative" class="foto"/></a>
</div>
<div class="clear"></div>
</div>
</div> 

Un saludo.

PD: No quiero un carrusel distinto, quiero el mio propio, pero no entiendo el porqué no funciona.

EDITO: Lo solucioné