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.
