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="i
magenes/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