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

向页面添加一个 link，为其指定一个 ID，然后将您的数组转换为一个对象，该对象具有图像 url 和每个相关联的 link，并且转换图像时更新 link 的 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>

可变 href 链接？计时器上的图像

Variable href links? Images on a timer

css

var

image

timer

carousel