El SlideShow más simple con jQuery

Un slideshow viene a significar visor de imágenes o diapositivas que van pasando una tras otra.

Estuve buscando para descargar slideshows para web. Encontré de todo tipo, muy elaborados y con muchos extras, unos de pago y otros gratis, pero no era lo que yo quería. Buscaba algo lo más sencillo posible para adaptarlo luego donde lo necesite y al final acabé programándolo a partir de jQuery.

Aquí va el código para el que lo necesite:

<html>
<head>
<!– Con ésto incluyes el jquery en tu web usando en CDN de Google –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
</head>
<body>

<img id=”imagenslide” src=”imagenes/imagenInicial.jpg” alt=”Imagen de una mascota..” />

<script>
  cambiaSlideShow();

function cambiaSlideShow() {
// variables para configurar
var dirImagenes = ‘imagenes/’; // directorio donde estan
 // las imágenes, se deben nombrar de la forma
 // 1.jpg
 // 2.jpg
 // etcétera…
var numImagenes = 3; // número de imágenes que hay

// elige un número aleatorio para mostrar las imágenes
// aleatoriamente
var randomNum = Math.ceil(Math.random() * numImagenes);

// con ésto la imagen desaparece y cuando ha desaparecido
// cambia de imagen
$(‘#imagenslide’).fadeOut(3000,
function () {$(‘#imagenslide’).attr(‘src’, dirImagenes + randomNum + ‘.jpg’);}
);

// con ésto otro la imagen aparece con un efecto fade de nuevo
$(‘#imagenslide’).fadeIn(3000);
setTimeout(function () {cambiaSlideShow(); }, 7000);
}

</script>
</body>
</html>

Y un archivo para descargar el ejemplo haciendo click aquí.
Ten en cuenta que debes poner las imágenes en el directorio dirImagenes que tengas en dicha variable.

Un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *