Crea presentaciones de diapositivas usando plantillas javascript. Espectacular presentación de diapositivas en JavaScript

Presentación de diapositivas para el sitio

Cada webmaster debe poder crear y agregar presentaciones de diapositivas al sitio. El uso de controles deslizantes es extremadamente popular y se pueden encontrar en casi cualquier recurso moderno.

¡Y esto no es casualidad!

Si estuvieras en la pagina "Animación" entonces viste trabajo ahí GIF-animación.
¡Genial, por supuesto! Y se crea de manera bastante simple, en Photoshop. Solo tiene un inconveniente importante, que limita en gran medida su uso en los sitios. Color bajo.

Las presentaciones de diapositivas están completamente desprovistas de esta desventaja.!

Es por eso que, para publicar varios dibujos y fotografías de varios colores en el sitio, es mejor usar no una animación, sino una presentación de diapositivas.

Solo que en este caso, el uso de HTML + CSS simple, tan querido por mi corazón, ya no será suficiente. ¡Necesitas incluir scripts ... ...!

Crea una presentación de diapositivas en el sitio

La solución más óptima es utilizar jQuery.
En paginas DOBLE GRANDE sección dedicada a esta maravillosa tecnología: JQuery, hay muchos ejemplos de su uso. No me voy a repetir.

Aplicado aquí jQuery Para crear diapositivas en su sitio, o el llamado deslizador... Puedes ver su trabajo ahora debajo y debajo en detalle escribí lo que hice para crear este tipo de control deslizante y mostré 7 controles deslizantes más (!) en funcionamiento.

Como puede ver, ¡este control deslizante funciona bien! Sin embargo, todos los demás también. Puedes verlo por ti mismo. => mirar inmediatamente

**Nota. A diferencia de otras páginas sección jQuery, Escribí los scripts necesarios directamente en el código HTML de esta página.
Además, lo que es más importante (!), Funcionan para mí desde una versión diferente de jQuery, posterior a la que estoy usando aquí.

Si uso la versión allí jquery v.1.10.1.min entonces aqui v.1.8.3.min

Sin embargo, con más detalle sobre esto y sobre todo lo demás, en orden, más.

Preparando presentación de diapositivas

El trabajo de crear e instalar una presentación de diapositivas en un sitio web generalmente consta de 4 etapas principales.

Preparando imágenes para el control deslizante

1. Recogí fotos. Lo principal es que deben ser un tamaño... Necesitas medirlos con cuidado.
En este caso, tomé imágenes listas para usar a partir de materiales adicionales adjuntos al curso de capacitación. ¿Cuál? Sobre esto aquí: "Enlaces"(Se abre en una nueva ventana).

2. Pintado en Photoshop imagen grafica estilo deslizador "televisión"... Que no sea original, pero muy conveniente.
Lo principal es que se necesita el tamaño del área de visualización. Un poco más en ancho y alto que los dibujos preparados.

Crear estructura metálica HTML + CSS para presentación de diapositivas

Las imágenes están escritas en código HTML exactamente en ese lugar , donde se mostrarán en el futuro. Los guiones se pueden escribir más tarde en cualquier lugar conveniente. Normalmente les dejo espacio justo debajo de las imágenes. La estructura es más lógica.

Colocaron las propias imágenes dentro de la etiqueta. pag, para lo cual configuré el ancho y el alto en los estilos CSS, y lo indiqué class = "presentación de diapositivas"... Y puso el párrafo con ellos dentro de la etiqueta general. div, en cuyo fondo colgué la imagen gráfica preparada del control deslizante ( televisión*). Le dio class = "slider_fon".
Es más, solo para el, para descargar la página, conecté una hoja de estilo externa e hice todo por las imágenes dentro del código HTML .

PD ** La última acción en absoluto NO necesariamente. Es solo que me conviene más. La estructura de la página parece de alguna manera más lógica.

En las reglas CSS especificadas tamaño de ventana para imágenes que luego aparecerán en el control deslizante (ancho - alto) ... Naturalmente, todas las imágenes debe ser del mismo tamaño.
Si es deseado, podría expandirse Opciones de CSS agregando, digamos, bordes, fondos, relleno y otros elementos. Sin embargo, creo que habría sido superfluo.

Si, no obstante, desea hacer esto, indique las dimensiones en GENERAL, es decir: imagen + TODOS establecen márgenes y bordes.

Conectando scripts

Recomiendo visitar la página de manual que hice para mí mientras aprendía sobre la tecnología jQuery. Te ayudará a entender mucho.
Abierto a ella acceso general: MUESTREO en jQuery(Se abre en una nueva ventana).

Como siempre, primero creé una carpeta js en el sitio. Luego descargué los scripts de presentación de diapositivas necesarios ( archivo) y lo descomprimí en esta carpeta. Terminó con dos archivos de script: el núcleo jquery-1.8.3.min.js y complemento jquery.cycle.all.min.js.

En él, por si acaso, agregué mi propio archivo de control myscripts11.js... Sin embargo, aquí no me resultó útil para iniciar y hacer una demostración de una presentación de diapositivas. Es que, los revisé conexión correcta carpeta creada.
Pero ... ... déjalo ser. Nunca se sabe qué quiero hacer en el futuro con los controles deslizantes colocados aquí. Hablando brevemente, "... nuestro tren blindado siempre está en la vía lateral".

Más lejos. Etiqueta interior … inserté las líneas donde escribí las rutas a los scripts..jpg "type =" text / javascript "> y al complemento:.
Archivo de control personalizado ("de repuesto") Comentado.

- y última -

Aquellos que vinieron a mi sitio con discapacitado en el navegador por el intérprete JavaScript, observar diapositivas, por supuesto, no pueden.
Verán los dibujos tal como están detallados en Código HTML, es decir. en una columna, uno tras otro.
Les hice una línea de advertencia y la inserté en la etiqueta.

¡Bien! Se crea la presentación de diapositivas. Queda por ajustar sus parámetros: la velocidad de cambio de imágenes, cómo se muestran, etc.

Configurar los ajustes de la presentación de diapositivas

Como escribí anteriormente, (en Nota **), Escribí los scripts necesarios directamente en el código HTML de esta página.
En la presentación de diapositivas que creé en mi sitio web, apliqué la configuración "defecto".

En general, es fácil establecer diferentes tipos de transiciones interesantes entre imágenes cambiando javascript colocado en el cuerpo de la página.
Digamos cambiando v texto línea sincronizar:falso sobre sincronizar:cierto, puede eliminar el espacio al cambiar las imágenes.

¡Nota IMPORTANTE!
Diferentes versiones jQuery mayo confrontar entre sí si están en la misma página.
Asegúrese (!) De comprobar el funcionamiento de los complementos con versión instalada jQuery, en la medida en ¡no todas las versiones son compatibles!

Ejemplo**
En otras páginas de la sección jQuery usando la biblioteca la versión está instalada jquery v.1.10.1.min... Entonces, es más moderno que v.1.8.3.min, a partir del cual adecuadamente (!) trabaja controles deslizantes de presentación de diapositivas aquí.

Enchufar jquery.cycle.all.min.js con ella ¡¡¡NO FUNCIONA!!!
(verificado)

Sin embargo, no se enfade. ¡Todo en tus manos!
En la sección de mi sitio "Útil"(se abre en una nueva ventana) encontrará tratado y probado (!) un conjunto completo de scripts necesarios para crear una presentación de diapositivas en su sitio. (¡Libre de cargo, por supuesto!)

Otros tipos de presentaciones de diapositivas

En esta subsección, no describiré con tanto detalle todos los pasos para crear una presentación de diapositivas. En principio, son exactamente iguales.
Aún más fácil. No es necesario pintar la imagen de fondo del control deslizante en Photoshop. Incluso separar mesa Estilos CSS no necesitará.

Si desea colocar varias opciones de presentación de diapositivas en uno página del sitio, como hice aquí ( vea abajo), especifique diferentes clases para cada opción en la línea de secuencia de comandos $(‘.diapositivas‘) .Ciclo ((

PD * No olvides escribirlo en CSS tamaños de ventana para cada clase si, no obstante, va a utilizar una hoja de estilo. No lo necesitaba.

Mire primero las imágenes fijas, que, de manera similar, tomé del curso de capacitación (¿Cuál? Repito el enlace: "Enlaces") y los publico aquí para compararlos.

Aquí están. ¡Futuros participantes de 7 presentaciones de diapositivas!
Vea su "desempeño" a continuación.

Le mostraré varios tipos populares de controles deslizantes. Los inserté, para facilitar la visualización, en la tabla general.
Izquierda- el nombre del efecto y una breve explicación, si es necesario. A la derecha- ejemplo.

Espero que haya disfrutado de la presentación de diapositivas del "grupo" que se muestra.
De hecho, ¡es conveniente! Las casas "bailan", cada una en su propia celda y no interfieren con nadie. ¡No es de extrañar que les di +5 por "rendimiento"!

Pero en serio, esta forma de crear una presentación de diapositivas para un sitio web ahorra gran cantidad lugares en la página.
Por tanto, repetiré lo dicho al principio de la sección.
El mas solucion optima para crear diferentes programas en el sitio - use jQuery.

Mirar práctico el uso de controles deslizantes para el diseño de páginas de recursos, puede hacerlo en un sitio de tarjetas de presentación creado especialmente por mí "Página personal".

¿Es posible hacer algo como esto SIN incluir scripts?
¡Seguro! Siga leyendo para conocer más detalles.

Presentación de diapositivas HTML solamente

Cómo crear un control deslizante simple en el sitio para NO aplicar diferentes complejos y pesados (por peso")¿guiones? ¡Fácilmente!
¡No lo estaría si no te hubiera mostrado formas tan interesantes y sencillas!

Usaremos para esto tecnologias basicas Internet => HTML + CSS.

Básico- significa aquellos sin los cuales ¡Internet es imposible en absoluto, en principio!

Sin embargo, primero eche un vistazo a las presentaciones de diapositivas simples creadas en el idioma. HTML, sin utilizar ningún script.
Hice una pequeña página separada especialmente para esto.

Después de eso, usted mismo podrá decidir qué es más adecuado para su recurso.

Conclusión

Espero que la información publicada sobre cómo puede crear fácilmente una presentación de diapositivas para el sitio le haya resultado interesante.
Al mismo tiempo, y por su "Portafolio" publicado bastante material sobre este fascinante tema.

Para los visitantes que necesitan crear una presentación de diapositivas o una galería en el sitio, conectar audio y video, pero no tienen tiempo para hacerlo por sí mismos, la sección puede ayudar "Elección del artista"(Se abre en una nueva ventana).

Hice una visita directa a esta página desde tres GRANDES secciones. También puedes regresar directamente. Mueva el cursor del mouse sobre las flechas; aparecerán pistas a donde conducen.
Haciendo clic en la parte superior logo, llegará al "Principal".

Control deslizante simple y liviano (21 Kb comprimido) escrito en Javascript puro, sin dependencias, es decir,

Creador de presentaciones de diapositivas HTML5

funciona sin jQuery.

Probado en los siguientes navegadores:

• Chrome 26.0
• Firefox 20.0
• Safari 5.1.7
• IE 10
• Opera 16.0

Hay soporte incompleto para IE8 / 9 (sin efectos).

GitHub | Manifestación

Peculiaridades

• Puede agregar un número ilimitado de controles deslizantes a la página, incluso colocar uno dentro del otro.
• Cambia el tamaño según el contenido, pero se puede deshabilitar.
• Navegación por teclado: cuando el cursor está en el control deslizante, puede alternar los controles deslizantes de flecha.
• Soporte para eventos táctiles móviles.

Conexión

Antes de la etiqueta de cierre, debe conectarse slidr.js o slidr.min.js expediente.

Marcado HTML

slidr.js puede trabajar con cualquier elemento que tenga un atributo. Está permitido utilizar cualquier elemento hijo de primer nivel con un atributo, por ejemplo:

Javascript

Después de conectar slidr.js el objeto global estará disponible. La forma más sencilla de crear:

Llamar con todas las configuraciones:

Ajustes

Todas las configuraciones disponibles para slidr.js se muestran en la siguiente tabla.

Funciones de devolución de llamada y recibe los siguientes datos:

API global de Slider.js

El espacio de nombres global slidr proporciona la siguiente funcionalidad:

API deslizante

Entrada corta

La lista completa de funciones de la API de Slidr.js se presenta a continuación.

Desplazarse por la página mientras cambia las diapositivas

Este desagradable error aparece en algunos navegadores. Para solucionarlo, debe agregar estilo a:

Cambio de tamaño dinámico

Slidr "comprende" si es necesario cambiar el tamaño del control deslizante para que se ajuste a la imagen. Si el bloque deslizante tiene dimensiones especificadas, Slidr no las cambiará automáticamente. Si se especifican las propiedades min-width y min-height, el control deslizante cambiará de tamaño para adaptarse al contenido, teniendo en cuenta estos valores. De lo contrario, el tamaño se realizará automáticamente.

Cambio de tamaño automático

Dimensiones estáticas

Controles deslizantes

El marcado de los controles es el siguiente:

Puede personalizar cualquier control deslizante mediante selectores CSS:

El control de flecha se implementa mediante un pseudo selector, por lo que para ocultarlo, use el siguiente código:

Pan rallado Slidr

Las migas de pan tienen HTML simple margen. Cada uno denota una línea completa y cada uno denota una ruta de navegación separada:

Diseñar migas de pan con CSS:

Licencia

eso software se puede utilizar libremente bajo la licencia MIT.

Etiquetas: Javascript

Un control deslizante simple en javascript puro

Control deslizante de javascript puro

Transcripción del video

# deslizador (posición: relativa; desbordamiento: oculto; ancho: 600 px; alto: 320 px; margen: 20 px automático; relleno: 0; estilo de lista: ninguno;)
.slide (posición: absoluta; ancho: 100%; alto: 100%; transición: todos los 1 en 0.1s; izquierda: 0;)
.slide img (ancho: 100%;)
.arrows (posición: relativa; margen: 0 automático; ancho: 600px;)
.arrow (posición: absoluta; cursor: puntero;)
.no_active (color: rojo;)
.siguiente (derecha: 0;)

Guión de Js:

var siguiente = document.getElementById ("siguiente");
var prew = document.getElementById ('prew');

var slides = document.getElementsByClassName ("diapositiva");
para (var i = 0; i

Vuelve a la lista

Geográficamente, estoy ubicado en San Petersburgo, pero puedo y estoy listo para trabajar con todos, independientemente de su ubicación.

Fotolaboratorio

Puedes escribirme a través del formulario realimentación, o contacta a través de redes sociales... Puedes ver el portafolio aquí y aquí.

¡Saludos queridos amigos!

101 diapositivas y presentaciones de diapositivas para un sitio web que usa Jquery CSS: ¡increíble, simplemente increíble!

En este breve tutorial, le mostraré cómo puede de una manera sencilla crear presentación de diapositivas!

Slideshow es una galería de JavaScript en la que las imágenes cambian automáticamente después de un cierto período de tiempo.

En nuestra galería, al cambiar la imagen, usaremos un pequeño efecto, es decir, ¡cambiar la transparencia de la imagen!

Código HTML simple:

Aquí todo es muy simple: coloque la primera imagen en el bloque con la clase de presentación de diapositivas.

Y aquí, de hecho, están los estilos de la clase anterior:

Establezca el ancho y centre el bloque.

Ahora echemos un vistazo más de cerca y analicemos el código javascript (Jquery):

Primero, se describe un image_array que contiene enlaces a imágenes.

Si necesita agregar, eliminar o cambiar imágenes de la galería, simplemente reemplace los enlaces en esta matriz, ¡no es necesario cambiar nada más!

La variable image_num se utiliza como contador de imágenes. Cuando llegamos a la última imagen de la matriz, establecemos esta variable en cero para comenzar a mostrar nuevamente desde la primera imagen (hacemos un bucle).

1. tomar una foto de un bloque con una clase de presentación de diapositivas;
2. hazlo 40% transparente (esto sucede en 500 milisegundos);
3. después de eso cambiamos el atributo src de la imagen (cambiamos el enlace a la imagen, tomándolo de la matriz image_array);
4. luego hacemos que la imagen sea opaca (esto también ocurre en 500 milisegundos).

Como ya dije, la variable image_num es un contador, la comparamos con la longitud del arreglo (es decir, con la cantidad de imágenes que participan en la presentación de diapositivas) y si image_num es igual al valor máximo, entonces lo reseteamos .

La función de diapositiva se ejecuta cada 3 segundos (3000 milisegundos) usando un intervalo (setInterval), lo que significa que las imágenes se voltearán cada 3 segundos.

Como ves, ¡no hay nada complicado!

En este punto, esta lección sobre javascript ha llegado a su fin, ahora puede echar un vistazo al ejemplo de demostración y también decir archivo original lección.

Eso es todo, hasta nuevas lecciones, ¡adiós!

Si necesita ayuda para crear alguna funcionalidad, sitio web, servicio, pruebas o calculadoras, entonces estoy listo para ayudar, con más detalle en la página de servicios.

Una descripción general del software de presentación de diapositivas

Crear una presentación de diapositivas para un sitio web

Al crear presentaciones de diapositivas para publicarlas en el sitio, es mejor usar listas soluciones de software... En mi opinión, la mejor y más sencilla opción es utilizar jQuery, biblioteca gratuita especial de scripts (pequeños programas en JavaScript). Los artículos anteriores ya han cubierto esta gran herramienta de desarrollo web. Por ejemplo, consulte el artículo Galería de fotos. jQuery- ¡simple y hermoso! ... Ahora apliquemos jQuery para crear una presentación de diapositivas en el sitio, el llamado control deslizante.

Para hacer esto, usaremos el complemento Diapositivas creado por el programador Nathan Searles, director de tecnología del estudio de diseño The Brigade en Portland, Oregon, EE. UU. Su otro desarrollo se describió en el artículo Galería de fotos para una tienda en línea.

Enchufar Diapositivas- fácil de instalar, tiene varias opciones para cambiar imágenes en una presentación de diapositivas y se usa a menudo para el encabezado del sitio. En la figura se muestra un ejemplo de cómo funciona este control deslizante con la configuración predeterminada:

Instalación de una presentación de diapositivas Diapositivas

Como siempre, primero crea una carpeta guiones en el sitio. Luego, debe descargar el archivo y descomprimirlo en la carpeta creada. Tendrá dos guiones jquery-1.8.3.min.js y jquery.cycle.all.min.js.

A continuación, en el título de la página dentro de la etiqueta. ... Inserte las siguientes líneas, donde la ruta a los scripts y un pequeño javascript definir los parámetros de la presentación de diapositivas:

Como puede ver, también hay una regla CSS simple en la que debe especificar el tamaño de la ventana para las imágenes de la futura presentación de diapositivas (ancho - alto). Naturalmente, todas las imágenes deben tener el mismo tamaño. Opcionalmente, puede ampliar los parámetros CSS agregando, por ejemplo, bordes, fondos, relleno y otros elementos para las imágenes de la presentación de diapositivas. En este caso, el tamaño debe estar indicado en general, es decir, la imagen más las sangrías y bordes que establezcas en largo y ancho.

Nota IMPORTANTE: si su sitio utiliza varios complementos jQuery, es más conveniente transferir el archivo jquery.js (preferiblemente ultima versión) v carpeta raíz para evitar descargarlo varias veces. En este caso, la línea de referencia será la misma para todos los complementos. En particular, para nuestro ejemplo, resulta así:

No se recomienda utilizar varios diferentes versiones jQuery para que no entren en conflicto entre sí. En este caso, asegúrese de verificar el funcionamiento de los complementos con la versión instalada jQuery ya que no todas las versiones son intercambiables.

Último paso- Colocación de imágenes en la página. Aquí también todo es sencillo. Coloque imágenes dentro de la etiqueta

u otro para el que está permitido establecer el ancho y el alto, y especificarlo class = "presentación de diapositivas"... Para nuestro ejemplo, el código HTML del control deslizante se ve así:

Esto completa la creación de la presentación de diapositivas y puede verla abriendo su página en un navegador.

Configurar los ajustes de la presentación de diapositivas Diapositivas

En la presentación de diapositivas creada, puede configurar diferentes tipos transiciones entre fotogramas, cambiando javascript colocado en el encabezado de la página. Además, reemplazar la línea en el script sincronización: falso sobre sincronización: verdadero, puede eliminar el espacio al cambiar las imágenes.

La duración de la visualización de imágenes está controlada por el parámetro se acabó el tiempo, y la velocidad - por el parámetro velocidad... Como ejemplo, aquí hay algunas opciones comunes de presentación de diapositivas y sus guiones correspondientes que deben insertarse en el título de la página.

1. Disolución(nuestro ejemplo):
2. Mezclar:
3. Zoom:
4. Voltee a lo largo del eje X o Y:
5. Contraer verticalmente:
6. Desplazamiento (desplazamiento):
7. Disuelva a la derecha:

A veces es necesario colocar varias opciones de presentación de diapositivas en una página del sitio, como se hace en este artículo. Para hacer esto, solo necesita especificar diferentes clases para cada opción en la línea $ (". presentación de diapositivas"). ciclo (((vea el código en la tabla anterior), y no olvide escribir los tamaños de ventana para cada clase en el CSS.

Un guión con el que es fácil crear presentaciones de varias imágenes. El guión admite conjunto grande efectos y elementos del ciclo.

Presentation Cycle es una variación de la funcionalidad Cycle. En lugar de una lista de números de diapositiva, Presentation Cycle genera automáticamente un indicador de progreso que muestra cuando aparece una nueva diapositiva.

Peculiaridades

• Visualización cíclica de imágenes.
• Tiempo de animación personalizable.
• Generación de un indicador de navegación que muestra el tiempo de la presentación de diapositivas.
• Funciona en navegadores modernos.

Cómo usar el guión

Conectamos todas las bibliotecas y scripts necesarios a la página:

Cree un contenedor que contenga elementos para el ciclo:

Bóveda

El contenedor con los elementos de bucle tiene identificación “contenedor_presentacion”, Que corresponde al uso de la configuración predeterminada en el script y la hoja de estilo. Los elementos anidados son de la clase " pc_item”, Que también se corresponde con el uso de la configuración predeterminada.

Después del contenedor, inserte la llamada al script:

Para ejecutar el script con la configuración predeterminada, las acciones descritas son suficientes.

Ajustes

Primero, descubramos cómo personalizar las imágenes que se utilizan para generar la barra de progreso.

Código Javascript en archivo PresentationCycle.js contiene la siguiente sección relativa a las imágenes utilizadas por el script (línea 19 ):

// Opciones del indicador de progreso barHeight: 14, // Altura de la barra Indicador de desplazamiento: 20, // Desplazamiento del indicador barImgLeft: "images / pc_item_left.gif", // Imagen de la barra lateral izquierdaImgRight: "images / pc_item_right.gif ", // Imagen de la parte derecha de barImgCenter:" images / pc_item_center.gif ", // Imagen de la parte central de barImgBarEmpty:" images / pc_bar_empty.gif ", // Imagen de una barra vacía barImgBarFull:" images / pc_bar_full.gif ", // Imagen de la tira rellena

La altura de la franja se especifica en píxeles. Debe ser la misma que la altura de las imágenes almacenadas en la carpeta. imagenes... Las imágenes son sprites que incluyen versiones activa y pasiva.

Para alinear las imágenes, debe hacer dos cuadrados idénticos uno al lado del otro. El lado izquierdo se utiliza para el estado pasivo y el lado derecho para el estado activo.

Es necesario que todas las imágenes tengan la misma altura, que corresponde a la altura de la tira indicadora.

Desplazamiento del indicador bar Desplazamiento Combo de relleno + franjas de margen.

Para usar configuraciones personalizadas, puede usar el siguiente código de llamada de complemento, que elimina la necesidad de realizar ediciones en Texto JavaScript expediente:

PresentationCycle.barHeight = 10; // Valores no predeterminados presentationCycle.barImgLeft = "images / pc_item_left_custom.gif"; PresentationCycle.init (); // Ejecuta el script

Para la configuración de los parámetros del ciclo, se utilizan las siguientes configuraciones:

// Opciones de diapositiva slideTimeout: 8000, containerId: "presentation_container", // Opciones de ciclo cycleFx: "scrollHorz", cycleSpeed: 600,

slideTimeout- tiempo de presentación de diapositivas.
containerId- un recipiente con elementos del ciclo.
cicloFx- efecto de transición entre diapositivas, utilizado por el complemento Cycle. CycleSpeed- velocidad de animación de transición entre diapositivas.

¡Al deshabilitar JavaScript, no podrá ver ejemplos de presentaciones de diapositivas interesantes!

Presentación de diapositivas para el sitio

Cada webmaster debe poder crear y agregar presentaciones de diapositivas al sitio. El uso de controles deslizantes es extremadamente popular y se pueden encontrar en casi cualquier recurso moderno.

¡Y esto no es casualidad!

**Nota. A diferencia de otras páginas sección jQuery, Escribí los guiones necesarios directamente en El HTML de esta página en sí.
Además, que es muy importante (!), trabajan para mi desde una versión diferente de jQuery, más reciente de lo que estoy usando aquí.

Si uso la versión allí jquery v.1.10.1.min entonces aqui v.1.8.3.min

Sin embargo, con más detalle sobre esto y sobre todo lo demás, en orden, más.

Preparando presentación de diapositivas

El trabajo de crear e instalar una presentación de diapositivas en un sitio web generalmente consta de 4 etapas principales.

Preparando imágenes para el control deslizante

1. Recogí fotos. Lo principal es que deben ser un tamaño... Necesitas medirlos con cuidado.
En este caso, tomé fotografías confeccionadas a partir de materiales adicionales adjuntos al curso de capacitación. ¿Cuál? Sobre esto aquí: "Enlaces" (Se abre en una nueva ventana).

2. Dibujé en Photoshop una imagen gráfica de un control deslizante en el estilo "televisión"... Que no sea original, pero muy conveniente.
Lo principal es el tamaño área de visualización necesario Un poco más en ancho y alto que los dibujos preparados.

Crear estructura metálica HTML + CSS para presentación de diapositivas

Las imágenes están escritas en código HTML exactamente en ese lugar , donde se mostrarán en el futuro. Los guiones se pueden escribir más tarde en cualquier lugar conveniente. Normalmente les dejo espacio justo debajo de las imágenes. La estructura es más lógica.

Colocaron las propias imágenes dentro de la etiqueta. pag, para lo cual configuré el ancho y el alto en los estilos CSS, y lo indiqué class = "presentación de diapositivas"... Y puso el párrafo con ellos dentro de la etiqueta general. div, en cuyo fondo colgué la imagen gráfica preparada del control deslizante ( televisión*). Le dio class = "slider_fon".
Es más, solo para el, para descargar la página, conecté una hoja de estilo externa e hice todo por las imágenes dentro del código HTML .

PD ** La última acción en absoluto NO necesariamente. Es solo que me conviene más. La estructura de la página parece de alguna manera más lógica.

En las reglas CSS especificadas tamaño de ventana para imágenes que luego aparecerán en el control deslizante (ancho - alto) ... Naturalmente, todas las imágenes debe ser del mismo tamaño.
Si es deseado, podría expandirse Opciones de CSS agregando, digamos, bordes, fondos, relleno y otros elementos. Sin embargo, creo que habría sido superfluo.

Si, no obstante, desea hacer esto, indique las dimensiones GENERAL, es decir: imagen + TODO establece relleno y bordes.

Conectando scripts

Recomendar visitar página de manual que hice por mí mismo mientras estudiaba tecnología jQuery. Te ayudará a entender mucho.
Acceso público abierto al mismo: MUESTREO en jQuery (Se abre en una nueva ventana).

Como siempre, primero creé una carpeta js en el sitio. Luego descargué los scripts de presentación de diapositivas necesarios ( archivo) y lo descomprimí en esta carpeta. Terminó con dos archivos de script: el núcleo jquery-1.8.3.min.js y complemento jquery.cycle.all.min.js.

En él, por si acaso, agregué mi propio archivo de control myscripts11.js... Sin embargo, aquí no me resultó útil para iniciar y hacer una demostración de una presentación de diapositivas. Es que, los revisé conexión correcta carpeta creada.
Pero ... ... déjalo ser. Nunca se sabe qué quiero hacer en el futuro con los controles deslizantes colocados aquí. Hablando brevemente, "... nuestro tren blindado siempre está en la vía lateral".

Más lejos. Etiqueta interior ... inserté las líneas donde escribí las rutas a los scripts. Los tengo: y al complemento: .
Archivo de control personalizado ("de repuesto") Comentado .

Y el último -

Aquellos que vinieron a mi sitio con discapacitado en el navegador por el intérprete JavaScript, observar diapositivas, por supuesto, no pueden.
Verán los dibujos tal como están detallados en Código HTML, es decir. en una columna, uno tras otro.
Hecho para ellos línea de advertencia y lo insertó en la etiqueta

¡Bien! Se crea la presentación de diapositivas. Queda por ajustar sus parámetros: la velocidad de cambio de imágenes, cómo se muestran, etc.

Configurar los ajustes de la presentación de diapositivas

Como escribí anteriormente, (en Nota **), Escribí los scripts necesarios directamente en el código HTML de esta página.
En la presentación de diapositivas que creé en mi sitio web, apliqué la configuración "defecto".

En general, es fácil establecer diferentes tipos de transiciones interesantes entre imágenes cambiando javascript colocado en el cuerpo de la página.
Digamos cambiando v texto línea sincronizar: falso sobre sincronizar: cierto, puede eliminar el espacio al cambiar las imágenes.

¡Nota IMPORTANTE!
Diferentes versiones jQuery mayo confrontar entre sí si están en la misma página.
Asegúrese (!) De comprobar el funcionamiento de los complementos con la versión instalada jQuery, en la medida en ¡no todas las versiones son compatibles!

Ejemplo**
En otras páginas de la sección jQuery usando la biblioteca la versión está instalada jquery v.1.10.1.min... Entonces, es más moderno que v.1.8.3.min, a partir del cual adecuadamente (!) Los controles deslizantes de presentación de diapositivas funcionan aquí.

Enchufar jquery.cycle.all.min.js con ella ¡¡¡NO FUNCIONA!!!
(verificado)

Sin embargo, no se enfade. ¡Todo en tus manos!
En la sección de mi sitio "Útil" (Se abre en una nueva ventana) encontrar tratado y probado (!) un conjunto completo de scripts necesarios para crear una presentación de diapositivas en su sitio. (¡Libre de cargo, por supuesto!)

Otros tipos de presentaciones de diapositivas

En esta subsección, no describiré con tanto detalle todos los pasos para crear una presentación de diapositivas. En principio, son exactamente iguales.
Aún más fácil. No es necesario pintar la imagen de fondo del control deslizante en Photoshop. Incluso separar Hoja de estilo CSS no necesitará.

Si desea colocar varias opciones de presentación de diapositivas en uno página sitio, como hice aquí vea abajo), especifique diferentes clases para cada opción en la línea de guión $(".diapositivas") .cycle ((

PD * No olvides escribirlo en CSS tamaños de ventana para cada clase si, no obstante, va a utilizar una hoja de estilo. No lo necesitaba.

Mire primero las imágenes fijas, que también tomé del curso de capacitación. (¿Cuál? Repetiré el enlace: "Enlaces") y publíquelos aquí para compararlos.

Aquí están. ¡Futuros participantes de 7 presentaciones de diapositivas!
Vea su "desempeño" a continuación.

Le mostraré varios tipos populares de controles deslizantes. Los inserté, para facilitar la visualización, en la tabla general.
Izquierda- el nombre del efecto y una breve explicación, si es necesario. A la derecha- ejemplo.

1. Disolución ("desvanecimiento"): Similar al ejemplo de la motocicleta superior.
2. Mezclar:
3. Zoom ("zoom"):
4. Gire a lo largo de los ejes ("cortinaX" o Y): Instalado aquí "cortinaX".
5. Girar verticalmente ("girar hacia abajo"): Se despliega aquí y puede establecer otros tipos de transiciones: TurnUP, Izquierda, Derecha.
6. Desplazamiento ("scrollDown"): Parcialidad. Lo instalé aquí abajo, y además de eso puedes colocar: scrollUp, Izquierda, Derecha.

Para uno de los proyectos, necesitaba un pequeño script de presentación de diapositivas que mostrara imágenes con un efecto de disolución en un bucle sin fin. Eso fue lo que hice. Primero, debe preparar un elemento de página HTML donde se llevará a cabo toda esta acción. No hay nada complicado aquí, lo único es que necesita establecer inmediatamente el tamaño del área: ahora pensemos en cómo hacer un flujo suave de una imagen a otra. Hay diferentes opciones, me decidí por las siguientes. Se toman dos imágenes y se superponen entre sí. Luego, el valor de transparencia de la imagen superior se cambia de acuerdo con el temporizador, disminuyendo gradualmente a completamente transparente. Como resultado, vemos la imagen inferior a través de la superior "derretida". En la siguiente etapa, debe cambiar las imágenes, la inferior va en lugar de la superior y la siguiente en la lista se carga en lugar de la imagen inferior. Para el usuario, esta etapa permanecerá invisible, ya que él ya ve la imagen de fondo y el navegador no necesita descargarla de ningún lado, y la nueva imagen se ubica debajo de la visible y el proceso de su carga durante la pausa entre cuadros. los cambios permanecen invisibles. Y después de la primera pasada de la presentación de diapositivas, todas las imágenes en general se tomarán de la caché del navegador. Como HTML, la posición inicial de la presentación de diapositivas se verá así:

1. < div style = "posición: relativa; altura: 600 px; ancho: 800 px;">
2. < img style = id = "sh_back" src = "img/02.jpg" >
3. < img style = "posición: absoluta; superior: 0px;" id = "sh_front" src = "img / 01.jpg">

Queda por traducir la teoría a la práctica. Nuestra presentación de diapositivas se realiza en dos etapas repetidas: una pausa entre transiciones, cuando la imagen se muestra sin cambios, y un ciclo con la aplicación del efecto de disolución. Además, cada una de estas acciones al final lanza la siguiente. Para cada etapa, escribiremos nuestra propia función en JavaScript.

1. var op = 1; // Transparencia
2. var img_front = 1; // Índice de la imagen mostrada
3. var img_back = 2; // Índice de la imagen de fondo
4. var img_total = 10; // Número total de imágenes en rotación
5. // Función para cambiar la transparencia de la imagen mostrada
6. función fade () (
7. // La opacidad disminuye
8. op - = 0,1;
9. si (op< 0 ) {
10. // La imagen es opaca
11. op = 1;
12. // Toma las siguientes fotos
13. img_front ++;
14. img_back ++;
15. // Si se ha mostrado todo, vuelva al primero
16. si (img_front> img_total) (img_front = 1;)
17. si (img_back> img_total) (img_back = 1;)
18. // Establecer nuevas imágenes como fondo y visualización
19. // Transparencia para IE
20. tmp. estilo. filtro = "progid: DXImageTransform.Microsoft.Alpha (opacidad = 100)";
21. tmp. src = "img /" + img_front + ".jpg";
22. var tmp = documento. getElementById ("sh_back");
23. tmp. src = "img /" + img_back + ".jpg";
24. // Pausa entre cambiar imágenes en 5 segundos
25. setTimeout ("esperando ()", 5000);
26. demás (
27. // Establecer un nuevo valor de transparencia para la imagen superior
28. var tmp = documento. getElementById ("sh_front");
29. // Transparencia para navegadores
30. tmp. estilo. opacidad = op;
31. // Transparencia para IE
32. tmp. estilo. filtro = "progid: DXImageTransform.Microsoft.Alpha (opacidad ="+
33. Matemáticas. round (op * 100) + ")";
34. // Siguiente iteración del bucle de desvanecimiento
35. setTimeout ("fundido ()", 50);
36. // Función para iniciar el efecto de desvanecimiento
37. función en espera () (
38. desvanecerse ();

El código es bastante simple, pero aún hay algunos puntos que requieren aclaración. Esto supone que todas las imágenes de la presentación de diapositivas tienen el mismo tamaño, correspondiente al tamaño del área de la presentación de diapositivas, ubicadas en la carpeta "img" y ordenadas por nombre de "1.jpg" a "10.jpg". Las rutas y los nombres de archivo pueden ser diferentes en su proyecto. El intervalo de retardo entre cambios de fotogramas está codificado de forma rígida: 5000 milisegundos o 5 segundos. La velocidad de una iteración de desintegración es de 50 milisegundos. Estos valores se pueden disminuir o aumentar según sea necesario. Todo lo que queda es comenzar la presentación de diapositivas.