可变的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>

​