En este artículo, vamos a crear una presentación de diapositivas simple con las funciones jQuery fadeIn() y fadeOut() .
Acercarse:
- Para el efecto de presentación de diapositivas para todas las imágenes, vamos a utilizar la función JavaScript setInterval() . Esta función llama a una función o evalúa una expresión a intervalos específicos que se dan en milisegundos.
- fadeIn(): este método aumenta gradualmente la opacidad de los elementos seleccionados, es decir, cambia de oculto a visible.
- fadeOut(): Este método se usa para desvanecer un elemento específico.
Ejemplo: en el siguiente código, estamos creando un elemento HTML <div> con la primera imagen de nuestra presentación de diapositivas. A continuación, estamos agregando CSS para darle estilo a nuestra presentación de diapositivas. Luego, cargamos la biblioteca jQuery en nuestro script.
Estamos usando una array para almacenar todas las imágenes de nuestra presentación de diapositivas. Estamos usando la función setInterval() con fadeIn() y fadeOut() . Estamos usando el método attr() para cambiar la fuente de la imagen.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<style>
.slideshow {
margin: auto;
width: 60%;
border: 3px solid #73ad21;
padding: 10px;
}
.slideshow img {
width: 100%;
height: 100%;
}
</style>
<script>
$(document).ready(function () {
var pic = $("img:first");
var images = [
"https://media.geeksforgeeks.org/wp-content/uploads/20210629182827/img1.jpg",
"https://media.geeksforgeeks.org/wp-content/uploads/20210629182923/img2.jpg",
"https://media.geeksforgeeks.org/wp-content/uploads/20210629182952/img3.jpg",
"https://media.geeksforgeeks.org/wp-content/uploads/20210629183022/img4.jpg",
];
var i = 0;
setInterval(function () {
// Returns 0, 1, 2, 3, 0, 1, 2, ....
i = (i + 1) % images.length;
pic.fadeOut(250, function () {
$(this).attr("src", images[i]);
$(this).fadeIn(1050);
});
}, 5000);
});
</script>
</head>
<body>
<div class="slideshow">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210629182827/img1.jpg" />
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por namaldesign y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA