- Plantillas Web
- Plantillas E-commerce
- Plantillas de CMS y Blog
- Plantillas Facebook
- Constructor Web
FAQs
General Tutorials
MonsterONE Subscrioption
“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 <head> 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 <div> con id de #wrapper. Aquí los atributos de script definen los siguientes valores:
• direction:’…’ –dirección del movimiento de división (leftRight, topDown, rightLeft, bottomUp);
• sliceDelay – pausa entre los movimientos de ‘partes cortadas’ de imagen (nota: no es una pausa entre slides);
• numberOfSlices – número de ‘cortes – partes coratdas’.
HTML
Ahora se puede revisar una representación de script HTML:
Todas las imágenes necesarias se colocan en una lista con viñetas (etiqueta <ul>) que se coloca en la etiqueta <div> 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:
CSS
Usted puede encontrar stylesheet relacionado con script en el fichero style.css principal. Usted tendrá que modificar los siguientes estilos:
