Carousel de imágenes (marquesina horizontal)

Google

Imágenes

Carousel de imágenes (marquesina horizontal)

Publicado el 30-Jul.-08

Versión 2008

Nueva versión del Carousel de imágenes. La versión anterior estaba ya anticuada y daba problemas usando un doctype para XHTML.

Ver demo

Cambios y mejoras con respecto a la versión anterior.

Ya no se escribe dinámicamente

He pretendido usar javascript no intrusivo y no depender de javascript para escribir las imágenes y los links asociados a ellas.

Ahora se insertan directamente las imágenes en el documento dentro de un contenedor, con sus links y sus textos alternativos. Con javascript activado se crea el carousel al vuelo usando las imágenes que encuentre en el contenedor que le indiquemos y la pone en marcha. Si no hay javascript las imágenes con sus links quedan accesibles y usables igual.

Escoger la dirección en la que se mueve

Por defecto se moverá de derecha a izquierda pero se le puede pedir que lo haga a la inversa.

Tener más de un Carousel de imágenes en el mismo documento

La versión anterior sólo contemplaba la posibilidad de tener 1 carouse de imágenes.
La nueva versión permite insertar más de uno.

Control opcional para pausar/mover el Carousel por el usuario

Opcionalmente se puede agregar un botoncito para detener y reanudar el movimiento del carousel.

Configuración

HTML

Crear un contenedor para el carousel de imágenes y asignarle un id.

Dentro del contenedor insertar las imágenes.

El aspecto del contenedor se maneja desde la hoja de estilos.

Javascript: archivo de configuración carousel_2008_conf.js

Para iniciar el carousel desde javascript le pediremos:

carousel1 = new tunaCarousel('nombreContenedor',desplazamiento en pixels, 'Dirección hacia la cual se mueve')

Suponiendo que al contenedor con las imágenes le hallamos dado un id="micarousel" y queramos que se desplace 1 píxel por cada movimiento y que se desplace de derecha a izquierda (rtl) llamaremos al script de la siguiente forma:

carousel1 = new tunaCarousel('micarousel',1, 'rtl')

Si quisiéramos un segundo carousel para otro contenedor de id="miOtroCarousel", que se desplace 2 píxels por movimiento y que se desplace en dirección inversa (ltr):

carousel2 = new tunaCarousel('miOtroCarousel',2, 'ltr')

Agregar pausa/reanudar

Si queremos que el carousel tenga un botón para control de pausa/reanudar se lo pedimos así

carousel1.controlesCarousel()

Eso le agregaría el control al primero de los carouseles definidos.
Si quisiéramos que el segundo también lo tuviera le pediríamos:

carousel2.controlesCarousel()

Iniciar el movimiento

Dentro del archivo carousel_2008_conf.js existe una función de nombre mueveCarousel que se encarga de poner en movimiento el/los carousel/es.

Dentro de esta función es donde hemos de indicar qué carousel/es queremos mover

function mueveCarousel(){
	carousel1.mueve()
	carousel2.mueve()
}

Finalmente hay que llamar a esta función mueveCarousel especificando el intervalo de tiempo a usar entre movimiento y moviento que queramos

var tiempo = setInterval(mueveCarousel, 1)

Donde 1 indica que el carousel se moverá cada 1 milisegundo de tiempo

El código para iniciar el/los carousel/es lo insertaremos de forma que se inicie al momento de cargar el documento (evento onload)

El archivo de configuración carousel_2008_conf.js quedaría entonces definido así:


var carousel1 
var carousel2

function mueveCarousel(){
	carousel1.mueve()
	carousel2.mueve()
}
onload = function(){
	carousel1 = new tunaCarousel('micarousel',1, 'rtl')
	carousel1.controlesCarousel()
	carousel2 = new tunaCarousel('miOtroCarousel',2, 'ltr')
	carousel2.controlesCarousel()
	tiempo = setInterval(mueveCarousel, 1)
}

Sólo resta vincular el archivo javascript del carousel carousel_2008.js y el archivo javascript con la configuración carousel carousel_2008_conf.js en el elemento head del documento html

<script type="text/javascript" src="carousel_2008.js"></script>	
<script type="text/javascript" src="carousel_2008_conf.js"></script>
CSS

El aspecto del recuadro del carousel se define desde la hoja de estilos.

#micarousel,
#miOtroCarousel{
	width: 300px;
	margin: auto;
	border: 1px solid #ccc;
	overflow: auto;
	height: 57px;
	position: relative;
	margin-top: 2em;
}
#micarousel img,
#miOtroCarousel img{
	width: 50px;
	border: 0 none;
}  

Si se usan los controles de pausa/reanudar se puede definir también su aspecto desde la hoja de estilos.

El identificador que el script le asignará será el_nombre_que_asignaste_al_contenedor + _Controles.
Según el ejemplo expuesto el controlador del primer carousel sería micarousel_Controles y para el segundo miOtroCarousel_Controles.

#miOtroCarousel_Controles{
	right: 0;
	bottom: 0;
}

#micarousel_Controles img,
#miOtroCarousel_Controles img{
	border: 2px solid #a00;
	width: 15px;
	height: 15px;
}

Demo

ver el código fuente del ejemplo

Archivos

Código
Imágenes

Puedes usar las imágenes (plei.jpg y pausa.jpg) del ejemplo para los controles y guardarlas en el mismo directorio en el que se encuentre el documento que vaya a mostrar el carousel.

Reanudar Pausar

Si quieres guardarlas en un directorio distinto, o usar imágenes con distinto nombre a las del ejemplo, o distintas imágenes para distintos carouseles deberás especificarlo antes de la instrucción que indica que el carousel mostrará controles de la siguiente forma:

carousel1 = new tunaCarousel('carousel1',1, 'rtl')
carousel1.ima_pausa = 'imagenes/mibotondepausa.gif' //Imagen para el botón de pausa
carousel1.ima_plei = 'imagenes/mibotondeplay.gif' //Imagen para el botón de Play
carousel1.controlesCarousel()

Safe Creative #0807310865240

Versiones anteriores



CMS para protectoras de animales Bambú
Creative Commons License
Javascript códigos by tunait is licensed under a Creative Commons Reconocimiento-Compartir bajo la misma licencia 2.5 España License.
Permissions beyond the scope of this license may be available at http://tunait.com/javascript/index.php?s=condiciones.

Todos los códigos incluídos los de la página han sido paridos y tecleados por tunait.com. subir