Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continúa navegando, consideramos que acepta su uso.
Las cookies de este sitio web se usan para personalizar el contenido y los anuncios, ofrecer funciones de redes sociales y analizar el tráfico. Además, compartimos información sobre el uso que haga del sitio web con nuestros partners de redes sociales, publicidad y análisis web, quienes pueden combinarla con otra información que les haya proporcionado o que hayan recopilado a partir del uso que haya hecho de sus servicios. Puede cambiar la configuración u obtener más información aquí

Aceptar

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



Buscador de animales en adopción
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. Política de cookies subir