변수 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>