Carrusel horizontal Javascript

[MNCA]

Hola,

estoy tratando de incluir en una web un Carrusel de imágenes horizontal realizado con Javascript, pero no encuentro realmente ninguno que sea automático y que además deje cada imagen paralizada unos 5 segundos.

Si alguien me pudiera ayudar lo agradecería....no tengo ni idea de javascript y se me hace un poco difícil encontrar lo que busco y además introducirlo en la Web.

Muchas gracias!

Saludos.

[josecarlosfilhov]

Tuve la necesidad de hacer una carrusell horizontal y ojala este te ayude . te lo explico a continuacion.


para esto utilizo la libreria jquery solo tienes que cargarla en tu codigo de preferencia superio a la version 1.4

una carpeta con las imagenes que se llame "imagenes" yo utilizo 5 imagenes "img.gif - img1.gif - img2.gif - img.3gif - img4.gif" toma en cuenta que estas imagenes son las que van a cargar "en los textos de color verde"

copia este codigo en el body y lo veras funcionar

ten en cuenta que esto esta de acuerdo a lo que yo necesitava correige los estilos de acuerdo a tu necesidad

ESPERO TE AYUDE.

<div style="width:645px; height:120px; overflow:hidden; position:relative;">
<div style="width:2000px; position:relative;" class="content-item-car">
<div class="item-car" style="width:215px; position:relative; float:left; overflow:hidden;">
<img style="border:none;" src="imagenes/img.gif" />
</div>
<div class="item-car" style="width:215px; position:relative; float:left; overflow:hidden;">
<img style="border:none;" src="imagenes/img1.gif" />
</div>
<div class="item-car" style="width:215px; position:relative; float:left; overflow:hidden;">
<img style="border:none;" src="imagenes/img2.gif" />
</div>
<div class="item-car" style="width:215px; position:relative; float:left; overflow:hidden;">
<img style="border:none;" src="imagenes/img3.gif" />
</div>
<div class="item-car" style="width:215px; position:relative; float:left; overflow:hidden;">
<img style="border:none;" src="imagenes/img4.gif" />
</div>
</div>
<div style="clear:both;"></div>
</div>
<script>
var content = "";
function efectoCarrusell(){
$(".item-car:eq(0)").fadeOut(5000); //efecto de desaparicion de la imagen que se va a ocultar , si lo quitas sigue funcionando
$(".item-car:eq(3)").css({display : 'none'}).fadeIn(5000); //efecto de aparicion de la imagen que se va a mostrar , si lo quitas sigue funcionando . OJO yo coloco $(".item-car:eq(3)") porque necesito que se muestre la imagen de la posicion 3 contando desde 0 en realidad la imagen 4
$(".content-item-car").animate({left : -215},5000,function () {
$(".content-item-car").append("<div class='item-car' style='width:215px; position:relative; float:left;'>"+$(".item-car:eq(0)").html()+"</div>");
$(".item-car:eq(0)").remove();
$(".content-item-car").css({left : 0});
//efectoCarrusell(); //esta opcion es para que no espere para hacer el efecto "automatico" si eliges esta tienes que quitar el setTimeout
setTimeout(efectoCarrusell, 3000); //vuelve a hacer el efecto despues de 3 segundos
}) }
$(document).ready(function (){
efectoCarrusell();//inicio del efecto
})
</script>


//si manejas jquery no tendras problemas con este pequeño script

[javiercitox]

porq mejor no ocupas un slider con jquery???

aqui encontraras algunos ejemplos

http://www.ajaxshake.com/es/JS/12131...ols-y-mas.html