1

soy nuevo en esto de la programación, pongo dos veces el mismo código , pero solo sale el primer slideshow el otro no sale. ¿como puedo hacer para que se muestren los dos, cada uno con un grupo de imágenes diferente. este es el código puesto.

Este sería el código que he puesto dos veces, pero solo se muestra un slideshow y quiero poner dos uno debajo del otro.

<style>
#slideshow {
position: relative;
}
#slideshow img {
width: 100%;
height: 100%;
position: relative;
transition: opacity 1s ease-in-out;
}
</style>
    
<div id="slideshow">
<a id="slideshow-link" target="_blank">
<img id="slideshow-image">
</a>
</div>
    
<script>
const images = [
                
{ src: '/publi/TVcehegin.png', link: 'https://tvcehegin.com' },
                
{ src: '/publi/banerpapasvidal.png', link: 'https://papasvidal.com' },
                
{ src: '/publi/TVcehegin.png', link: 'https://tvcehegin.com' },
                
{ src: '/publi/mstaralrm.png', link: 'https://movistarproseguralarmas.es' },
                
]
    
let currentIndex = 0;
    
function changeImage() {
const imgElement = document.getElementById('slideshow-image');
const linkElement = document.getElementById('slideshow-link');
    
imgElement.style.opacity = 0; // Desvanecer la imagen
setTimeout(() => {
              imgElement.src = images[currentIndex].src;
                    linkElement.href = images[currentIndex].link;
                    imgElement.style.opacity = 1; // Mostrar la nueva imagen
                }, 1000); // Esperar 1 segundo para el desvanecimiento
    
                currentIndex = (currentIndex + 1) % images.length;
            }
    
            setInterval(changeImage, 4000);
            changeImage(); // Iniciar el ciclo
        </script>
    ```
     
1
  • Si lo pones dos veces estás repitiendo los mismos ID de los elementos, y al ejecutarse se pararán en el primero solamente, o eso parece por lo que cuentas.
    – masterguru
    Commented el 10 oct. a las 18:55

1 respuesta 1

0

Una forma simplista es repetir el código pero para un segundo slideshow

#slideshow {
  position: relative;
}

#slideshow img {
  width: 100%;
  height: 100%;
  position: relative;
  transition: opacity 1s ease-in-out;
}
<div id="slideshow">
  <a id="slideshow-link" target="_blank">
    <img id="slideshow-image">
  </a>
</div>
<br>
<div id="slideshow2">
  <a id="slideshow-link2" target="_blank">
    <img id="slideshow-image2">
  </a>
</div>
<script>
  const images = [{
      src: 'https://megaexitosnoroeste.com/publi/TVcehegin.png',
      link: 'https://tvcehegin.com'
    },
    {
      src: 'https://megaexitosnoroeste.com/publi/banerpapasvidal.png',
      link: 'https://papasvidal.com'
    },
    {
      src: 'https://megaexitosnoroeste.com/publi/TVcehegin.png',
      link: 'https://tvcehegin.com'
    },
    {
      src: 'https://megaexitosnoroeste.com/publi/mstaralrm.png',
      link: 'https://movistarproseguralarmas.es'
    },
  ]

   const images2 = [{
      src: 'https://img.freepik.com/free-vector/flat-holi-festival-illustration_23-2148857940.jpg?w=740&t=st=1728598136~exp=1728598736~hmac=30c9a41c282ee6151985a6e082ea8a3d410be598c655c24719dd029e2b8a3b45',
      link: 'https://tvcehegin.com'
    },
    {
      src: 'https://img.freepik.com/free-photo/colorful-tropical-summer-background-layout-banners-design-horizontal-poster-greeting-card_123827-31201.jpg?w=996&t=st=1728598173~exp=1728598773~hmac=cc99627a712ca94dd66ce511412cb675f573ff5ec91aff708e77ff5c09c54b4f',
      link: 'https://papasvidal.com'
    },
    {
      src: 'https://img.freepik.com/free-photo/colorful-design-with-spiral-design_188544-9588.jpg?w=1380&t=st=1728598194~exp=1728598794~hmac=0c4bde844dab05650afc69932c63c259cb69cbb608149a0ae633f496062b78da',
      link: 'https://tvcehegin.com'
    },
    {
      src: 'https://img.freepik.com/premium-photo/colorful-painting-rainbow-is-created-by-artist_1065421-21098.jpg?w=1380',
      link: 'https://movistarproseguralarmas.es'
    },
  ]
  
  let currentIndex = 0;
  let currentIndex2 =0;
  
  function changeImage() {    
    const imgElement = document.getElementById('slideshow-image');
    const linkElement = document.getElementById('slideshow-link');

    imgElement.style.opacity = 0; // Desvanecer la imagen
    setTimeout(() => {
      imgElement.src = images[currentIndex].src;
      linkElement.href = images[currentIndex].link;
      imgElement.style.opacity = 1; // Mostrar la nueva imagen
    }, 1000); // Esperar 1 segundo para el desvanecimiento

    currentIndex = (currentIndex + 1) % images.length;
  }
  
  function changeImage2() {    
    const imgElement = document.getElementById('slideshow-image2');
    const linkElement = document.getElementById('slideshow-link2');

    imgElement.style.opacity = 0; // Desvanecer la imagen
    setTimeout(() => {
      imgElement.src = images2[currentIndex2].src;
      linkElement.href = images2[currentIndex2].link;
      imgElement.style.opacity = 1; // Mostrar la nueva imagen
    }, 1000); // Esperar 1 segundo para el desvanecimiento

    currentIndex2 = (currentIndex2 + 1) % images2.length;
  }
    
  setInterval(changeImage, 4000);
  changeImage(); // Iniciar el ciclo
  setInterval(changeImage2, 6000);
  changeImage2(); // Iniciar el ciclo
</script>

Sin embargo no es la óptima, porque el código deber ser DRY (Don't Repeat Yourself) o sea no repetir. Te recomiendo optimizarlo.

1
  • Pepe, con tu ejemplo e indicaciones, he logrado hacer lo que quería y me has dado la respuesta a un problema que llevaba días tratando de solucionar y que gracias a ti lo he logrado. Te estoy muy agradecido. Commented el 11 oct. a las 8:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.