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é