- Plantillas Web
- Plantillas E-commerce
- Plantillas de CMS y Blog
- Plantillas Facebook
- Constructor Web
“Sliced Image” Slider
noviembre 15, 2010
Este es un script de Slider que representa un plug-in de navegación por imágenes. Su característica es el efecto de transición de imagen: la animación corta la imagen y mueve cada sector por separado. El número de cortes y la dirección del movimiento de división son opcionales.
JavaScript
Para que el script funcione, el fichero index-#.html con slider debe contener estas líneas de código HTML para incluir el script jquery.slices.1.2.js y jQuery framework:
La sección del fichero index-#.html contiene estas líneas de código que inicializan la funcionalidad de script con los valores básicos:
El script comienza con el elemento • direction:’…’ –dirección del movimiento de división (leftRight, topDown, rightLeft, bottomUp); HTML Todas las imágenes necesarias se colocan en una lista con viñetas (etiqueta CSS con id de #wrapper. Aquí los atributos de script definen los siguientes valores:
• sliceDelay – pausa entre los movimientos de ‘partes cortadas’ de imagen (nota: no es una pausa entre slides);
• numberOfSlices – número de ‘cortes – partes coratdas’.
Ahora se puede revisar una representación de script HTML:) que se coloca en la etiqueta
principal con id de #wrapper y clase .slide-box. Así que para añadir un slide adicional tendrá que añadir la siguiente estructura de codificación:
Usted puede encontrar stylesheet relacionado con script en el fichero style.css principal. Usted tendrá que modificar los siguientes estilos: