E - Slider de imágenes
Este ejercicio consiste en un script que hace aparecer (por desvanecimiento > fadeIn/out) un conjunto de imágenes.
Utilizo un botón para iniciar/parar el slider. Desde el script se puede configurar el número de imágenes, la duración y la velocidad de desvanecimiento. La hoja de estilos asociada proporciona una vista agradable.
Para realizar el script he utilizado: function, un if...else y las funciones setTimeout y clearTimeout.
Merece la pena destacar que he empleado setAttribute para cambiar el atributo data que a su vez cambia el :before de la caja contenedora.
Código JavaScript
// ========================================
// Código JavaScript
// SLIDER DE IMÁGENES
// (cc) 2017, 3con14.pro
// ========================================
// CONFIGURACIÓN DEL SHOW
var fotos = 20; // número de fotos
var nfoto = 1; // foto inicial
var duracion = 2000; // en milisegundos
var velocidad = 500; // en milisegundos
// -------------------------------------------------
var tmp1,tmp2, stop = true;
var img = document.querySelector('#foto');
var box = document.querySelector('#contenedor');
var tit = document.querySelector('#fondo');
var on_off = document.querySelector('#boton');
function slide() {
img.src = 'img/' + nfoto + '.jpg';
tit.setAttribute('data-nun',nfoto);
box.style.opacity = 1;
tmp1 = setTimeout(next,duracion);
}
function next(){
nfoto++;
if (nfoto > fotos) {
nfoto = 1;
}
box.style.opacity = 0;
tmp2 = setTimeout(slide,velocidad);
}
on_off.addEventListener('click',function(){
if (stop) {
slide();
stop = false;
on_off.innerHTML = "PARAR";
} else {
clearTimeout(tmp1);
clearTimeout(tmp2);
stop = true;
on_off.innerHTML = "INICIAR";
}
});
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Curso de JS">
<meta name="author" content="(cc) 3con14" />
<title>Slider</title>
<link rel="stylesheet" href="/code/css/estilos.css">
</head>
<body>
<div id="fondo" class="fondo" data-nun="">
<div id="contenedor" class="contenedor">
<img src="/code/img/1.jpg" alt="" id="foto">
</div>
</div>
<button id="boton">INICIAR</button>
<script src="/code/js/codigo.js"></script>
</body>
</html>
Reglas CSS
/* ========================================
// Hoja de estilos CSS
// Slider
// (cc) 2017, 3con14.pro
============================================ */
* {
margin : 0; padding: 0;
box-sizing : border-box;
}
:focus { outline: 0 none transparent; }
body {
min-height : 85vh;
display : flex;
flex-direction : column;
align-items : center;
justify-content : center;
background-color : #678;
}
.contenedor,.fondo {
max-width : 500px;
width : 100%;
height : auto;
margin : auto;
line-height : 0;
opacity : 0;
transition : all 0.3s ease-in;
}
.fondo {
opacity : 1;
position : relative;
border : 6px solid #fff;
background-color : rgba(0, 0, 0, 1);
box-shadow : 0 0 50px 0 rgba(0, 0, 0, 0.5);
}
img {
max-width : 100%;
height : auto;
}
.fondo:before{
content : attr(data-nun);
position : absolute;
bottom : -75px;
right : 10px;
text-shadow : 3px 3px 6px #333;
font : 4em/1 sans-serif;
color : #fff;
}
button {
border : 1px solid #fff;
min-width : 10vw;
padding : 1vw 2vw;
margin : 10px;
cursor : pointer;
transition : all 0.15s ease-in;
box-shadow : 2px 2px 0 0 rgba(0, 0, 0, 0.4);
}
button:hover {
box-shadow: 0 0 4px 4px #0f0;
}
button:active {
background-color : rgba(255,0,0,0.8);
color : #fff;
}
Demo
Imprimir
Correo electrónico
