E - Slider de imágenes

ejercicio 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 setTimeoutclearTimeout.

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

d 004 slider

Imprimir Correo electrónico

Visitas...

Hoy ........ 4

Ayer ....... 5

Mes ........ 44

Total ........ 5892

En línea...

Hay 5 invitados y ningún miembro en línea

< 3con14 - LAB / >

1998 - 2017, www.3con14.biz
(cc) Jesús Plaza M.
RECONOCIMIENTOS