en una programación de modo que sólo una imagen se muestra en un momento. El JavaScript de rotación es acompañado a menudo por los efectos de animación que se desvanecen o de diapositivas de imágenes o texto dentro y fuera de la etiqueta
. La biblioteca jQuery proporciona una manera fácil de seleccionar las imágenes y aplicar una animación de rotación.
La página de inicio para muchos sitios web en la actualidad contiene una serie de imágenes que giran o se deslice dentro y fuera de la página. Esta funcionalidad se implementa mediante la creación de una única etiqueta
con varias imágenes y el uso de JavaScript 'setInterval' método para girar el
en una programación de modo que sólo una imagen se muestra en un momento. El JavaScript de rotación es acompañado a menudo por los efectos de animación que se desvanecen o de diapositivas de imágenes o texto dentro y fuera de la etiqueta
. La biblioteca jQuery proporciona una manera fácil de seleccionar las imágenes y aplicar una animación de rotación.
- Crear un nuevo documento HTML con el Bloc de notas o un editor HTML. Inserte las cabeceras HTML en el documento:
Rotar Div - Crear un estilo CSS para el
para ser rotado. Establecer la posición, anchura, altura y color de fondo para el elemento
. Desactivar la visualización de imágenes en la etiqueta
y activar la visualización de la imagen con el nombre de la clase 'active':
- Insertar la librería de jQuery en el documento mediante la inclusión de una fuente pública, tales como la Api de Google:
https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'>> - Añadir el código JavaScript para rotar las imágenes en la etiqueta
. Encontrar la imagen con el 'activo' y seleccionar la imagen siguiente en la lista. Si el tamaño de la imagen siguiente es cero, empezar de nuevo al principio de la lista con la primera imagen:
la función rotate() {
var activo = $('#girar .active')
if ($('#girar .activa').next().length >0)
var siguiente = $('#girar .activa').next()
else
var siguiente = $('#girar img:primero')
- Desvanecer la imagen con el 'activo' de la clase y se desvanecen de la siguiente imagen. Quitar el 'activo' de la clase a partir de la imagen actual y asignar a la siguiente imagen:
activo.fadeOut('fast', function() {
activo.removeClass('activo')
a continuación.fadeIn('slow').addClass('active')
})
} - Establecer un temporizador para rotar las imágenes de cada cinco segundos, usando el 'setInterval' método:
$(document).ready(function() {
setInterval('rotate()', 5000)
})
- Insertar la etiqueta
en el cuerpo del documento y asignar el 'activo' de la clase a la primera imagen:
http://l.yimg.com/g/images/soup-discover.jpg' width='979' height='349' alt='Image1' class='active'>
http://l.yimg.com/g/images/soup_hero_124.jpg.v1' width='979' height='349' alt='Image2'>
http://l.yimg.com/g/images/soup_hero_jessica.jpg.v1' width='979' height='349' alt='Image3'>
http://l.yimg.com/g/images/soup_hero_alejokirchuk.jpg.v1' width='979' height='349' alt='Image4'>
Otras Personas Están Leyendo
- Cómo Cargar SVG para DIV
- Cómo Animar un DIV De Pantalla Ninguno para Bloquear en jQuery
- Guardar el documento. Abrirlo en un navegador y ver las imágenes en la etiqueta
rotar en la pantalla por la decoloración en y fuera de cada cinco segundos.
Como Girar un Div en JavaScript