JS Coverflow, carousel de imagenes con puro JavaScript

JS Coverflow es un carousel de imágenes (diapositiva ó presentación de imágenes). Algunas de sus características son:

• Funciona en Firefox 3, Opera 9.5 y Safari 3.
• Solo trabaja con imágenes del mismo ancho y alto.
• Puedes utilizar la rueda del ratón y las teclas de dirección para desplazarte por las imágenes.
• Puedes personalizar las etiquetas y el evento onclick de cada imágen.

Cómo usarlo

Después de descargar coverflow.js, primero tendrás que definir el estilo para el contenedor del Coverflow:

#__cvfl-coverflow-wrapper canvas{
	position: absolute;
}

#__cvfl-coverflow{
	height: 375px;
	margin: auto;
	overflow: hidden;
	position: relative;
	width: 530px;
}

#__cvfl-coverflow-label{
	color: #fff;
	font: 14pt Lucida Grande, Lucida Sans Unicode;
	line-height: 1.3em;
	position: relative;
	text-align: center;
	top: 273px;
	z-index: 700;
}

Finalmente despues dentro del body de la página:

<div id="__cvfl-coverflow">
	<div id="__cvfl-coverflow-wrapper"></div>
	<div id="__cvfl-coverflow-label"></div>
</div>
    
<script type="text/javascript" src="coverflow.js"></script>
<script type="text/javascript">
    window.onload = function()
    {
        Coverflow.init(
        [
            {src: 'img/img-0-lo.jpg', label: {album: 'All That I Am', artist: 'Santana'}},
            {src: 'img/img-1-lo.jpg', label: {album: 'August & Everything After', artist: 'Counting Crows'}},
            {src: 'img/img-2-lo.jpg', label: {album: 'Back to Bedlam', artist: 'James Blunt'}},
            {src: 'img/img-3-lo.jpg', label: {album: 'Carnival of Rust', artist: 'Poets of the Fall'}},
            {src: 'img/img-4-lo.jpg', label: {album: 'Collision Course', artist: 'Linkin Park'}},
            {src: 'img/img-5-lo.jpg', label: {album: 'Crossfade', artist: 'Crossfade'}},
            {src: 'img/img-6-lo.jpg', label: {album: 'Dexter', artist: 'Rolfe Kent'}},
            {src: 'img/img-7-lo.jpg', label: {album: 'Life for Rent', artist: 'Dido'}},
            {src: 'img/img-8-lo.jpg', label: {album: 'Say I Am You', artist: 'The Weepies'}},
            {src: 'img/img-9-lo.jpg', label: {album: 'Signs of Life', artist: 'Poets of the Fall'}},
            {src: 'img/img-10-lo.jpg', label: {album: 'Viva la Vida', artist: 'Coldplay'}},
            {src: 'img/img-11-lo.jpg', label: {album: 'We Were Here', artist: 'Joshua Radin'}}
        ], 
        {
            createLabel: function(item)
            {
                return item.label.album +'<br>'+ item.label.artist;
            }
	    /*si deseas configurar el evento onclick hacerlo en las siguiente lineas*/
	    /*, 
            onSelectCenter: function(item, id)
            {
                var img = new Image();
                img.onload = function()
                {
                    Lightbox.show(this.src, id);
                };
                img.src = item.src.replace('-lo.jpg', '-hi.jpg');
            }*/
        });
    }
</script>

Puedes descargar un ejemplo editado por mi desde aqui.

Vía Ajaxian