変数hrefリンク？タイマーの画像

Question

こんにちは私は、cssを使ってタイマーに回転イメージカルーセルを作成する方法を考え出しましたが、href変数を作る方法もわかりません。各画像に異なるリンクを関連付けることは可能ですか？前もって感謝します！

<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

ページへのリンクを追加し、その後、画像のURLとそれぞれに関連付けられたリンクを持つオブジェクトにあなたの配列を変換し、リンクのhrefを更新し、それにIDを与えるときにトランジション画像。

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>