これがコードです。アニメーションが表示されているときに、各画像のテーブルセル内にボタンへのリンクを配置する必要があります。
私はそれがjavascriptよりもcssまたはhtmlヘルプであるか、単純なネイティブ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>
私のアプローチは次のとおりです。
スライドにdata-url属性を付けます。
スライドを変更するときdata-urlは、現在のスライドを取得してhref、リンクの属性に割り当てます。
Voilà！私はこれがあなたに答えることを願っています：
スニペット
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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加