Liens href variables? Images sur une minuterie

Question

Bonjour J'ai trouvé comment créer un carrousel rotatif d'image sur une minuterie en utilisant css, mais je ne sais pas comment faire aussi la variable a href. Est-il possible d'avoir des liens différents associés à chaque image? Merci d'avance!

<div class="sliderHolder columns-6 floatRight"> 

<div class="sliderButtonShadow"></div> 
<a href="#"><img id="slider" src="image1.jpg" align="middle" class="sliderImage"></a> 

<script type = "text/javascript"> 

     var image=document.getElementById("slider"); 
     var currentPos = 0; 
     var images = ["image1.jpg","image2.jpg", "image3.jpg"] 

     function volgendefoto() { 
      if (++currentPos >= images.length) currentPos = 0; 
      image.src = images[currentPos]; 
     } 

     setInterval(volgendefoto, 3000); 

    </script> 

Answer 1

Ajouter un lien vers la page, donnez-lui une carte d'identité, puis convertir votre tableau dans un objet qui a l'image URL et le lien associé à chaque, et mettre à jour le href du lien lorsque vous images de transition.

var image = document.getElementById("slider"); 
 
var link = document.getElementById('sliderLink'); 
 
var currentPos = 0; 
 
var images = [ 
 
    { 'img':"http://kenwheeler.github.io/slick/img/fonz1.png", 
 
    'url':'http://image1.com' 
 
    }, 
 
    { 'img':"https://s-media-cache-ak0.pinimg.com/originals/33/3b/4f/333b4f22ae39d1aaf8c23d77e759d8e1.jpg", 
 
    'url':'http://image2.com' 
 
    }, 
 
    { 'img':"http://www.star2.com/wp-content/uploads/2015/06/happy-days-770x470.jpg", 
 
    'url':'http://image3.com' 
 
    } 
 
]; 
 

 
function volgendefoto() { 
 
    if (++currentPos >= images.length) currentPos = 0; 
 
    image.src = images[currentPos].img; 
 
    link.href = images[currentPos].url; 
 
} 
 

 
setInterval(volgendefoto, 3000);

<a id="sliderLink" href="#"><img id="slider" src="http://www.star2.com/wp-content/uploads/2015/06/happy-days-770x470.jpg" align="middle" class="sliderImage"></a>