Presentación de diapositivas crossfading adaptable en JavaScript puro-Tinyfade. js
| Autor: | moqmar |
|---|---|
| Views Total: | 2,224 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 23, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Tinyfade. js es una biblioteca JavaScript muy pequeña para crear una presentación adaptable con animación de desvanecimiento automático.
Funcionamiento
Incluya los siguientes archivos JS y CSS en la Página Web.
<script src="tinyfade.min.js"> <link rel="stylesheet" src="tinyfade.min.css">
Cree un grupo de imágenes que desee recorrer.
<div class="tinyfade"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"> ... </div>
Active la proyección de diapositivas y especifique el intervalo & duración de la animación como sigue:
let tf = new Tinyfade( ".tinyfade", // Element 3000, // Interval in milliseconds (-1 for manual mode, default = 5000) 1000 // Animation duration (default = 1000) );
Métodos de la API:
// Navigate
tf.next();
tf.prev();
let thirdImage = tf.e.getElementsByTagName("img")[2];
tf.goto(thirdImage);
// Control
tf.pause();
tf.continue();
tf.destroy(); // Stop everything and delete references. Events.
tf.addEventListener("goto", function(current, last) {
console.log("Showing " + current.src + " (last image: " + last.src + ")");
}); Registro de cambios
10/23/2018
- Agregue soporte para elementos que no sean de imagen en CSS
