HTML Editor

Edita código
<!DOCTYPE html>
<html>
<head>
  <title>Presentador de Imágenes</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: linear-gradient(to bottom, #e0ffff, #cce0ff);
      font-family: sans-serif;
    }

    .contenedor {
      position: relative;
      width: 90%;
      max-width: 800px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
      border: 10px solid #d2e0fc;
      border-radius: 10px;
      background: white;
    }

    .slideshow-container {
      position: relative;
      overflow: hidden;
      padding-top: 56.25%; /* Relación de aspecto 16:9 */
      width: 100%; /* Añadido para escalabilidad */
      height: 0; /* Añadido para escalabilidad */
    }

    .imagen {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
    }

    .imagen.active {
      opacity: 1;
    }

    .fade.active {
      animation: fade 0.5s ease-in-out;
    }

    .slide.active {
      animation: slide 0.5s ease-in-out;
    }

    .zoom.active {
      animation: zoom 0.5s ease-in-out;
    }

    .rotate.active {
      animation: rotate 0.5s ease-in-out;
    }

    .flip.active {
      animation: flip 0.5s ease-in-out;
    }

    @keyframes fade {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes slide {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }

    @keyframes zoom {
      from { transform: scale(0.8); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    @keyframes rotate {
      from { transform: rotate(0deg); opacity: 0; }
      to { transform: rotate(360deg); opacity: 1; }
    }

    @keyframes flip {
      from { transform: rotateY(0deg); opacity: 0; }
      to { transform: rotateY(180deg); opacity: 1; }
    }

    .controles {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 15px 10px;
      background: linear-gradient(to right, #4058a8, #8092d0);
      border-radius: 5px;
      box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1),
                  inset -2px -2px 5px rgba(255, 255, 255, 0.3);
      /* Añadido para escalabilidad de botones */
      flex-wrap: wrap; 				  
    }

    .btn {
      background: none;
      border: none;
      padding: 8px 12px;
      margin: 0 5px;
      font-size: 1.2em;
      color: white;
      cursor: pointer;
      /* Añadido para escalabilidad de botones */
      flex: 1 0 auto; /* Distribución flexible */
      text-align: center; /* Centrar texto */	  
    }

    .btn img {
      width: 24px;
      height: 24px;
    }

    select,
    input[type="range"] {
      margin: 0 5px;
      padding: 5px;
      border-radius: 5px;
      border: 1px solid #ccc;
      /* Añadido para escalabilidad de botones */
      flex: 1 0 auto; /* Distribución flexible */	  
    }

    #image-marker {
      margin: 0 5px;
      padding: 8px 12px;
      color: white;
      background: linear-gradient(to right, #f06, #36d);
      border-radius: 10px;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
      /* Añadido para escalabilidad de botones */
      flex: 1 0 auto; /* Distribución flexible */	  
    }

    #autoplay-icon, 
    #loop-icon, 
    #sonido img {
      width: 24px;
      height: 24px;
      color: white;
    }

    #loop-icon.active img {
      opacity: 1;
    }

    #loop-icon.inactive img {
      opacity: 0.5;
    }
	
    /* Estilos para imágenes responsivas */
    .imagen img {
      /* Ajustar la imagen al contenedor manteniendo la relación de aspecto */
      object-fit: contain;
      width: 100%;
      height: 100%;
    }
	
  </style>
</head>
<body>
  <div class="contenedor">
    <div class="slideshow-container">
      <div class="imagen fade active">
        <img src="images/imagen1.jpg" alt="Imagen 1">
      </div>
      <div class="imagen fade active">	  
        <img src="images/42.png" alt="Imagen 1">
      </div>	  
      <div class="imagen fade">
        <img src="images/imagen2.jpg" alt="Imagen 2">
      </div>
      <div class="imagen fade">
        <img src="images/imagen3.jpg" alt="Imagen 3">
      </div>
	  <div class="imagen fade">
        <img src="images/imagen4.jpg" alt="Imagen 4">
      </div>
	  <div class="imagen fade">
        <img src="images/imagen5.gif" alt="Imagen 5">
      </div>
	  
    </div>

    <div class="controles">
      <button class="btn first"><img src="icons/step-backward.png" alt="first"></button>
      <button class="btn prev"><img src="icons/chevron-left.png" alt="prev"></button>
      <button class="btn next"><img src="icons/chevron-right.png" alt="next"></button>
      <button class="btn last"><img src="icons/step-forward.png" alt="last"></button>

      <select id="transiciones">
        <option value="fade">Fundido</option>
        <option value="slide">Deslizamiento</option>
        <option value="zoom">Zoom</option>
        <option value="rotate">Rotar</option>
        <option value="flip">Voltear</option>
        <option value="none">Ninguna</option>
      </select>

      <input type="range" id="velocidad" min="1" max="10" value="5">
      <button class="btn" id="autoplay-btn"><img id="autoplay-icon" src="icons/play.png" alt="play"></button>

      <button class="btn" id="loop"><img id="loop-icon" class="inactive" src="icons/redo.png" alt="loop"></button>
      <button class="btn" id="sonido"><img src="icons/volume-up.png" alt="volume"></button>
      <span id="image-marker"></span>
    </div>
  </div>

  <script>
    // Variables y selectores globales
    const sonidoTransicion = new Audio('transicion.mp3');
    const btnPrev = document.querySelector('.prev');
    const btnNext = document.querySelector('.next');
    const btnFirst = document.querySelector('.first');
    const btnLast = document.querySelector('.last');
    const selectTransiciones = document.getElementById('transiciones');
    const btnAutoplay = document.getElementById('autoplay-btn');
    const btnLoop = document.getElementById('loop');
    const rangoVelocidad = document.getElementById('velocidad');
    const btnSonido = document.getElementById('sonido');
    const imageMarker = document.getElementById('image-marker');
    const autoplayIcon = document.getElementById('autoplay-icon');
    const loopIcon = document.getElementById('loop-icon');

    const slideshowContainer = document.querySelector('.slideshow-container');
    const imagenes = slideshowContainer.querySelectorAll('.imagen');
    let slideIndex = 1;
    let intervalo = null; // Inicializa el intervalo como null
    let sonidoActivo = true;
    let loopActivo = false;

    mostrarImagen(slideIndex);

    document.addEventListener('click', iniciarSonido, { once: true });

    function iniciarSonido() {
      sonidoTransicion.play().catch(error => {
        console.warn("Error al reproducir el sonido:", error);
      });
    }

    function avanzarImagen(n) {
      const previoSlideIndex = slideIndex;
      mostrarImagen(slideIndex += n);
      if (previoSlideIndex !== slideIndex && selectTransiciones.value !== 'none') {
        reproducirSonido();
      }
    }

    function mostrarImagen(n) {
      if (n > imagenes.length) {
        slideIndex = loopActivo ? 1 : imagenes.length;
      } else if (n < 1) {
        slideIndex = loopActivo ? imagenes.length : 1;
      } else {
        slideIndex = n;
      }

      imagenes.forEach(img => {
        img.style.opacity = "0";
        img.classList.remove('active');
      });

      imagenes[slideIndex - 1].style.opacity = "1";
      imagenes[slideIndex - 1].classList.add('active');

      aplicarTransicion();
      actualizarMarcador();

      // El autoplay no se detiene automáticamente, se controla por el botón
      if (!loopActivo && slideIndex === imagenes.length && intervalo) {
        detenerAutoplay(); // Detenemos el autoplay al final
        autoplayIcon.src = 'icons/play.png';
      }
    }

    function aplicarTransicion() {
      let transicionSeleccionada = selectTransiciones.value;
      imagenes.forEach(imagen => {
        imagen.classList.remove('fade', 'slide', 'zoom', 'rotate', 'flip');
      });
      if (transicionSeleccionada !== 'none') {
        imagenes[slideIndex - 1].classList.add(transicionSeleccionada);
      }
    }

    function iniciarAutoplay() {
      // Solo inicia el autoplay si no hay intervalo activo
      if (!intervalo) {
        let velocidad = 11 - rangoVelocidad.value;
        intervalo = setInterval(() => {
          if (slideIndex === imagenes.length) {
            if (loopActivo) {
              slideIndex = 0; // Reinicia para que empiece desde el principio
            } else {
              detenerAutoplay();
              return; // Salir para no avanzar más
            }
          }
          avanzarImagen(1);
        }, velocidad * 500); // Ajustar la velocidad de transición

        autoplayIcon.src = 'icons/pause.png';
      }
    }

    function detenerAutoplay() {
      if (intervalo) {
        clearInterval(intervalo);
        intervalo = null; // Reinicia el valor para permitir nuevo inicio
        autoplayIcon.src = 'icons/play.png';
      }
    }

    function reproducirSonido() {
      if (sonidoActivo) {
        sonidoTransicion.currentTime = 0;
        sonidoTransicion.play().catch(error => {
          console.warn("Error al reproducir el sonido:", error);
        });
      }
    }

    function actualizarMarcador() {
      imageMarker.textContent = `${slideIndex} / ${imagenes.length}`;
    }

    btnPrev.addEventListener('click', () => {
      avanzarImagen(-1);
      detenerAutoplay(); // Detiene el autoplay cuando se navega manualmente
    });

    btnNext.addEventListener('click', () => {
      avanzarImagen(1);
      detenerAutoplay(); // Detiene el autoplay cuando se navega manualmente
    });

    btnFirst.addEventListener('click', () => {
      mostrarImagen(1);
      detenerAutoplay(); // Detiene el autoplay cuando se navega manualmente
    });

    btnLast.addEventListener('click', () => {
      mostrarImagen(imagenes.length);
      detenerAutoplay(); // Detiene el autoplay cuando se navega manualmente
    });

    selectTransiciones.addEventListener('change', () => {
      aplicarTransicion();
      mostrarImagen(slideIndex);
    });

    btnAutoplay.addEventListener('click', () => {
      if (intervalo) {
        detenerAutoplay();
      } else {
        iniciarAutoplay();
      }
    });

    btnLoop.addEventListener('click', () => {
      loopActivo = !loopActivo;
      loopIcon.classList.toggle('active', loopActivo);
      loopIcon.classList.toggle('inactive', !loopActivo);
      loopIcon.src = loopActivo ? 'icons/redo2.png' : 'icons/redo.png';
    });

    rangoVelocidad.addEventListener('input', () => {
      if (intervalo) {
        detenerAutoplay();
        iniciarAutoplay();
      }
    });

    btnSonido.addEventListener('click', () => {
      sonidoActivo = !sonidoActivo;
      btnSonido.innerHTML = sonidoActivo ? '<img src="icons/volume-up.png" alt="volume">' : '<img src="icons/volume-mute.png" alt="volume">';
    });

    // Ajustar el rango de velocidad al medio
    rangoVelocidad.value = 5;
  </script>
</body>
</html>