Question

这是代码，我需要在每个图像出现到期动画时为表格单元格中的按钮添加一个链接。

我更喜欢它是css或html帮助而不是javascript，或者简单的原生javascript会有所帮助。感谢。

<section id="home" class="parallax">
        <div class="slider" style="background:url('assets/images/demo/slider/flickr_01.jpg')"></div>
        <div class="slider" style="background:url('assets/images/demo/slider/flickr_02.jpg')"></div>
        <div class="slider" style="background:url('assets/images/demo/slider/flickr_03.jpg')"></div>
        <div class="table-cell">
            <a href="#about" class="scrollTo btn btn-default">CONOCE MAS</a>
        </div>
    </section>

Answer 1

您可以使用超链接标记包装每个图像div类。因此，每个图像本身都成为一个可点击的按钮，链接到其他网页或网站。

<a href=“#about">
  <div class="slider" style="background:url('assets/images/demo/slider/flickr_01.jpg')">
  </div>
</a>

Answer 2

JavaScript解决方案

我的方法是：

为幻灯片提供data-url属性。
更改幻灯片时，获取当前幻灯片的data-url并将其分配给链接的href属性。

瞧！我希望这会回答你：

<强>段

var sliders = [...document.getElementsByClassName("slider")],
  link = document.querySelector("a"),
  current = 0;
  
// When link is clicked, log the href
link.addEventListener("click", event => {
  event.preventDefault();
  console.log(link.href);
});
  
changeSlide();

function changeSlide() {
  sliders.forEach(slider => slider.style.display = "none");
  sliders[current].style.display = "block";
  link.href = sliders[current++].getAttribute("data-url");
  
  current %= sliders.length;
  setTimeout(changeSlide, 2000);
}

#home {
  position: relative;
  height: 100px;
}

.slider {
  height: 50px;
  width: 50px;
  position: absolute;
}

a {
  margin-left: 80px;
}

<section id="home" class="parallax">
  <div class="slider" style="background: #faa" data-url="#red"></div>
  <div class="slider" style="background: #ada" data-url="#green"></div>
  <div class="slider" style="background: #ed9" data-url="#yellow"></div>
  <div class="table-cell">
    <a href="#about" class="scrollTo btn btn-default">CONOCE MAS</a>
  </div>
</section>

需要为每个滑块图像添加一个指向该按钮的链接

2 个答案:

JavaScript解决方案