Si necesitas una forma rápida y sencilla de crear una presentación de diapositivas en tu sitio web, entonces jQuery es la herramienta perfecta para ti. Esta biblioteca de JavaScript es extremadamente poderosa y fácil de usar, lo que la hace ideal para principiantes y desarrolladores experimentados por igual. En este artículo, te mostraremos cómo crear una presentación de diapositivas simple utilizando jQuery, para que puedas mejorar el aspecto de tu sitio web fácilmente.
Las presentaciones de diapositivas son bastante comunes en los sitios que tienen fotos y otras imágenes que deben mostrarse a sus visitantes. Usando jQuerypuede crear una presentación de diapositivas muy simple usando solo unas pocas lineas de código jQuery.
En este tutorial, repasaremos un simple ejemplo de presentación de diapositivas construido con jQuery. Siéntase libre de usar el código de ejemplo que se muestra a continuación y desarrollarlo para que pueda agregar componentes más sofisticados para su presentación de diapositivas.
Usando el ejemplo a continuación, usted puede controlar cuántas imágenes se incluyen en el espectáculo, la duración de cada diapositiva, así como la velocidad de aparición y desaparición gradual entre las imágenes.
el html
El único código HTML necesario es un simple <div> que contiene todos sus <img /> (imagen) elementos. Aquí hay un ejemplo…
<div id="slideshow-container">
<img class="slides" src="https://www.itgeared.com/create-simple-slideshow-jquery-fading/images/image1.jpg" />
<img class="slides" src="images/image2.jpg" />
<img class="slides" src="images/image3.jpg" />
</div>el css
hay muy poco codigo css que debe aplicarse a nuestro contenedor de presentación de diapositivas y sus elementos secundarios. El siguiente marcado CSS establece la posición del contenedor principal en relativa para que podamos establecer posicionamiento absoluto en los elementos de la imagen dentro del contenedor principal. Luego, configure las imágenes para que se muestren igual a none. Las imágenes aparecerán y desaparecerán usando jQuery.
<style>
#slideshow-container {
position:relative;
}
#slideshow-container img.slides {
position:absolute;
top:0;left:0;
display:none;
}
</style>El jQuery
Como puede ver en el siguiente ejemplo, no se necesita mucho código jQuery para este ejemplo. El primeras cuatro lineas se utilizan para configurar nuestras variables. imgDuration se utiliza para establecer la cantidad de tiempo (en milisegundos) que se mostrará la imagen. fadeSpeed se utiliza para controlar (en milisegundos) la cantidad de tiempo que fadeIn y fadeOut dura el efecto. La variable container se utiliza para capturar el slideshow-container objeto (el elemento div que contiene las imágenes). Y el curIndex La variable se utiliza para realizar un seguimiento de con qué elemento de imagen estamos trabajando.
La función llamada slideShow() es donde ocurre la magia. Solo hay tres líneas de código. La primera línea se desvanece en la imagen actual, mientras que la segunda línea se desvanece en la siguiente imagen. Notarás que estamos usando un operador condicional en la segunda línea. Usamos el operador condicional (muy parecido a un bloque if..then..else) para determinar qué hacer según el imagen actual. Si estamos en la última imagen, reseteamos el curIndex variable de nuevo a ‘0’ para comenzar el proceso de nuevo. Aquí está el código jQuery…
<script>
var imgDuration = 5000;
var fadeSpeed = 2000;
var container = $('#slideshow-container');
var curIndex = -1;
function slideShow() {
container + $('img.slides').eq(curIndex).fadeOut(fadeSpeed);
container + $('img.slides').eq(curIndex = curIndex < container.children().length - 1 ? curIndex + 1 : 0).fadeIn(fadeSpeed);
setTimeout("slideShow()", imgDuration);
}
slideShow();
</script>Aquí hay más información sobre cómo funciona el operador condicional.
result = condition ? expression1 : expression2;
is equivalent to...
if (condition) {
result = expression1;
} else {
result = expression2;
}Ejemplo completo
<!DOCTYPE html>
<html>
<head>
<title>Slideshow Demo</title>
<style>
#slideshow-container {
position:relative;
}
#slideshow-container img {
position:absolute;
top:0;
left:0;
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div id="slideshow-container">
<img class="slides" src="https://www.itgeared.com/create-simple-slideshow-jquery-fading/images/image1.jpg" />
<img class="slides" src="images/image2.jpg" />
<img class="slides" src="images/image3.jpg" />
</div>
<script>
var imgDuration = 5000;
var fadeSpeed = 2000;
var container = $('#slideshow-container');
var curIndex = -1;
function slideShow() {
container + $('img.slides').eq(curIndex).fadeOut(fadeSpeed);
container + $('img.slides').eq(curIndex = curIndex < container.children().length - 1 ? curIndex + 1 : 0).fadeIn(fadeSpeed);
setTimeout("slideShow()", imgDuration);
}
slideShow();
</script>
</body>
</html>Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded
