Presentación de diapositivas en una página web. La estructura básica de nuestro control deslizante. Complemento jQuery "jSwitch"
Complemento para crear los controles deslizantes más bellos- Yo veo. Muchas configuraciones, navegación, temporizador, API, soporte dispositivos táctiles, inserción de vídeo y adaptabilidad.
04.03.2013 1 692
Complemento para crear una micro galería en un sitio web. Visualización automática, la posibilidad de agregar una descripción para cada imagen y un modo de desplazamiento circular, es decir. bucle.
01.02.2013 1 153
El complemento jQuery.popeye es una solución elegante y hermosa para mostrar una galería de imágenes sin salir de la página. Solo se muestra una foto en la página; cuando pasa el cursor, puede desplazarse o ampliar todas las imágenes en este conjunto. El complemento es fácil de instalar y configurar y fue desarrollado como una alternativa a los comúnmente utilizados lightbox2, fancybox o colorbox, que usan ventanas modales.
23.11.2012 7 286
Excelente jQuery responsivo control deslizante - FlexSlider. Incluye la capacidad de navegar con viñetas (puntos), le permite usar miniaturas junto con la navegación, la capacidad de insertar un video como diapositiva, una opción de carrusel y el complemento también tiene una pequeña API.
12.09.2012 4 667
Mobilyslider es un complemento jQuery simple que pesa solo 5 KB, pero tiene un aspecto minimalista y elegante. Hay algunos opciones adicionales, incluida la activación/desactivación de la navegación, la flecha hacia adelante/atrás, la presentación automática de diapositivas, la selección del tipo de transición, etc.
07.06.2012 1 403
Creemos una presentación de diapositivas a pantalla completa, cuya idea principal es cortar la diapositiva actualmente abierta al navegar a la siguiente o anterior. Usando jQuery y animación css, podemos obtener transiciones únicas entre diapositivas.
09.05.2012 778
Presentación de diapositivas en jQuery con acompañamiento musical utilizando la biblioteca jPlayer multiplataforma. Las diapositivas cambian a intervalos específicos en la composición musical.
04.05.2012 892
Rhinoslider es un complemento de presentación de diapositivas jQuery bastante flexible. No sólo hay una variedad de efectos disponibles, sino que también es posible agregar estilos propios, efectos y funciones al control deslizante. En Página Oficial El complemento tiene un generador de efectos conveniente: un generador; una vez que haya hecho su elección, puede descargar inmediatamente el ejemplo de trabajo generado.
03.05.2012 2 061
Complemento de presentación de diapositivas basado en jQuery y complemento de aceleración. Se agregó la capacidad de desplazarse por las diapositivas usando la rueda del mouse. Las páginas de demostración muestran varias opciones utilizando la navegación por diapositivas.
12.04.2012 1 387
Usando jmpress, hagamos complemento jquery Para crear presentaciones de diapositivas con interesantes efectos 3D para diapositivas.
Probablemente ya hayas oído hablar del nuevo elemento HTML5. lienzo. Este elemento especial, que le permite crear y modificar gráficos. Además, podemos usarlo como cualquier otro elemento de la página - aplicar animaciones jQuery para ello, maneje eventos para él e intégrelo en la plantilla.
Normalmente el uso del elemento. lienzo limitado a juegos y demostraciones conceptuales. EN Esta lección Lo usaremos de manera práctica: haremos una presentación de diapositivas con un excelente efecto de transición que funcionará en navegadores más antiguos.
CON usando javascript Hagamos un filtro especial para cada imagen de la presentación de diapositivas. crearemos nueva versión imágenes con mayor contraste y más colores brillantes y guárdelo en un elemento de lienzo.
Cuando el usuario quiere pasar a la siguiente diapositiva, el elemento lienzo mostrado en pantalla mediante animación fundirse, creando efecto suave transición.
HTMLComencemos creando el marcado HTML.
html5-presentación de diapositivas.htmlPresentación de diapositivas basada en el elemento canvas HTML5 y jQuery | Demostración para el sitio web del sitio.
El diseño de las presentaciones de diapositivas es muy simple. Elemento principal div#presentación de diapositivas contiene una lista desordenada y flechas a las diapositivas anterior y siguiente. Una lista desordenada contiene diapositivas definidas como elementos. li. La ilustración anterior muestra que el elemento lienzo con la imagen modificada se insertará aquí.
Al final se incluyen jQuery y nuestro archivo. script.js, que se analizará más adelante en esta lección.
CSSTodos los estilos de presentación de diapositivas están contenidos en el archivo. estilos.css. Usamos la identificación del elemento principal #slideshow como definición del espacio de nombres, por lo que puedes simplemente agregar estos estilos a tu proyecto sin el riesgo de conflictos de nombres.
estilos.css#presentación de diapositivas (color de fondo:#F5F5F5; borde:1px sólido #FFFFFF; altura:340px; margen:150px auto 0; posición:relativa; ancho:640px; -moz-box-shadow:0 0 22px #111; -webkit -box-shadow:0 0 22px #111; box-shadow:0 0 22px #111; ) #presentación de diapositivas ul( altura:320px; izquierda:10px; estilo de lista:ninguno fuera de ninguno; desbordamiento:oculto; posición:absoluta; arriba:10px; ancho:620px; ) #presentación de diapositivas li( posición:absoluta; pantalla:ninguna; índice z:10; ) #presentación de diapositivas li:primer hijo( pantalla:bloque; índice z:1000; ) #presentación de diapositivas. slideActive( índice z:1000; ) #lienzo de presentación de diapositivas( pantalla: ninguna; posición:absoluta; índice z:100; ) #presentación de diapositivas .arrow( altura:86px; ancho:60px; posición:absoluta; fondo:url(" img/arrows.png") sin repetición; arriba:50%; margen-superior:-43px; cursor:puntero; índice z:5000; ) #presentación de diapositivas .previous( posición de fondo:arriba izquierda;izquierda:0; ) #presentación de diapositivas .previous:hover( posición-fondo:abajo izquierda;) #presentación de diapositivas .next(posición-fondo:arriba derecha;derecha:0;) #presentación de diapositivas .next:hover(posición-fondo:abajo derecha;)
Podemos dividir a nuestros visitantes que interactuarán con la presentación de diapositivas en tres grupos:
- Aquellos que tengan JavaScript deshabilitado. Estos usuarios sólo verán la primera diapositiva y no podrán cambiar a otras diapositivas.
- Aquellos que tienen JavaScript habilitado pero no admiten elementos. lienzo. Para dichos visitantes, las diapositivas cambiarán instantáneamente sin ningún efecto de transición.
- Los que lo tienen habilitado Soporte de JavaScript y el elemento es compatible lienzo. Este grupo utiliza Últimas Versiones Firefox, Safari, Chrome, Ópera. Verán la presentación de diapositivas en todo su esplendor.
Las reglas se desarrollan teniendo en cuenta los dos primeros grupos. Usando un selector primer hijo De forma predeterminada, solo se mostrará la primera diapositiva.
Ya hemos discutido el principio básico de cómo funciona una presentación de diapositivas. Ahora veamos la implementación práctica.
script.js - Parte 1$(window).load(function())( // Estamos usando el evento window.load, así que estamos seguros de que // imágenes de presentación de diapositivas cargado sin errores. //Comprueba si es compatible navegador actual elemento de lienzo: var supportCanvas = "getContext" en document.createElement("canvas"); // Manipular con elemento de lienzo consumen mucha CPU // así que usamos setTimeout para hacer las cosas asincrónicas y mejorar // el tiempo de respuesta de la página var slides = $("#slideshow li"), current = 0, slideshow = (width:0,height:0 ); setTimeout(function())( window.console && window.console.time && console.time("Generado en:"); if(supportCanvas)( $("#slideshow img").each(function())( if (! slideshow.width)( // Obtener las dimensiones de la primera imagen: slideshow.width = this.width; slideshow.height = this.height; ) // Salida versión modificada las imágenes creanCanvasOverlay(esto); )); ) window.console && window.console.timeEnd && console.timeEnd("Generado en:"); $("#slideshow .arrow").click(function())( var li = slides.eq(current), canvas = li.find("canvas"), nextIndex = 0; // Dependiendo de qué flecha se presionó , // calcula el índice de la siguiente diapositiva if($(this).hasClass("next"))( nextIndex = current >= slides.length-1 ? 0: current+1; ) else ( nextIndex = current
