變量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

添加一個鏈接頁面，給它一個ID，然後將您的陣列到具有圖像的URL和相關的每一個環節的對象，並更新鏈接的href當你過渡圖像。

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>