ubiquitour.com

Como ciclo de múltiples efectos en JQuery

Como ciclo de múltiples efectos en JQuery

JQuery, una librería JavaScript potente, ayuda a los propietarios de sitios alrededor del mundo construir vistosas páginas Web rápidamente. El plugin de jQuery ciclo, descrito por Cocy Lindley en "JQuery Cookbook", por ejemplo, es uno de los muchos plugins gratis que puede utilizar para extender las capacidades de jQuery. Este plugin le permite crear una presentación de diapositivas que ciclos a través de múltiples efectos de transición automáticamente en su página Web. Aunque ayuda a comprender jQuery jQuery obras, sólo necesita conocimientos básicos de JavaScript para usar el plugin de jQuery ciclo.

Instrucciones

1 Desplácese hasta el jQuery ciclo Descargar página por GitHub y haga doble clic en la primera entrada en la lista para abrir una ventana de diálogo de guardar. Haga clic en "Guardar" para guardar el archivo en su disco duro. La primera entrada contiene la versión más reciente del plugin.

2 Pegue el código siguiente en la sección principal de uno de tus documentos HTML para agregar la biblioteca de jQuery a tu documento:

< script tipo = "texto/javascript" src = "& lt; / script" rel = "nofollow" target = "_blank" > https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js&quot;>&lt;/script>

3 Pegue el código que se muestra a continuación, reemplazar "Downloaded_File.js" con el nombre del archivo descargado, después de que el código aparece en el paso anterior:

< script src="Downloaded_File.js" tipo = "texto/javascript" >< / script >

4 Agregue el código siguiente a la sección del cuerpo del documento, reemplazando "image1.jpg" y "image2.jpg" con los nombres de dos imágenes en el disco duro:

< div clase = "mySlideshow" >< img src="image1.jpg" width = "280" height = "280" class = "primero" / >< img src="image2.jpg" width = "280" height = "280" / >< / div >

5 Los primeros selectores de tres clase en el siguiente código definen el tamaño del div contenedor y ocultan las imágenes. El .mySlideshow img selector le permite modificar el borde, color de fondo y relleno alrededor de las imágenes. Cambiar estos valores a todo lo que te gusta. El atributo de relleno, cuyo valor es 20px, determina la cantidad de relleno que aparece entre cada imagen y el envase. Este valor es en píxeles. Los valores de los atributos width y height coinciden con los valores establecidos en la sección del cuerpo. Añadir este código CSS a la sección head del documento:

< estilo tipo = "text/css" >.mySlideshow {width: 300px; altura: 300px;}.mySlideshow img {Mostrar: none}.mySlideshow img.first {Mostrar: block}.mySlideshow img {}ancho del borde: 2px; color del borde: azul; estilo del borde: solid;color de fondo: amarillo;padding: 20px; anchura: 280px; altura: 280px;Top: 0; izquierda: 0;}< / estilo >

6 Añadir botón que llame a una función JavaScript llamada cycleEffects y se lo pasa el nombre de uno de los efectos disponibles. Estos botones también pasan la velocidad a la que se produce un efecto de transición--1.000 milisegundos en el ejemplo siguiente--y el número de milisegundos que espera antes de mostrar la siguiente imagen. Que valor, conocido como tiempo de espera, es 3.000 en este caso. Agregar estas definiciones de los botones a continuación el código que aparece en el último paso:

< tipo de entrada = "button" value = "Se descolora Zoom" onclick = "cycleEffects ('fadeZoom', '1000', 3000')" / >< tipo de entrada = "button" value = "Shuffle" onclick = "cycleEffects ('shuffle', '1000', 3000')" / >< tipo de entrada = "button" value = "Toss" onclick = "cycleEffects ('tirar', '1000', 3000')" / >

7 Agregar una función que contiene un ciclo de comando para ejecutar el seleccionado mediante los valores de velocidad y tiempo de espera pasados a la función. Pegar la función cycleEffects en la sección del documento como se muestra a continuación:

función cycleEffects (efecto, effectSpeed, effectTimeout) {}$('.mySlideshow').cycle ({}FX: efectos,velocidad: effectSpeed,tiempo de espera: effectTimeout});

8 Guardar el documento y visualizarlo en un navegador.

9 Haga clic en el botón "Zoom se descolora" para comenzar la presentación. El efecto Fade Zoom provoca nuevas imágenes que se desvanecen el zoom para reemplazar las imágenes existentes. Haga clic en los otros botones para hacer la presentación de diapositivas mostrar los otros efectos.

Consejos y advertencias

  • No tienes que usar botones para activar el plugin. Llamar a la función de cycleEffects cualquier momento que te gusta de cualquier instrucción de JavaScript y pase el nombre del efecto que desea producir. Escuchar la lista de efectos disponibles en la página de JQuery ciclo Plugin efectos navegador Web.
  • Añadir imágenes adicionales según sea necesario para el elemento div de mySlideshow.