我正在使用光滑的 slider 幻灯片。我试图在幻灯片前进时更改 Logo 图像的 href。我尝试了两种不同的脚本,但似乎都不起作用。
<main class="Site-content">
<div class="main slider" id="wrapper">
<div><img src="#" alt="slider image"></div>
<div><img src="#" alt="slider image"></div>
<div><img src="#" alt="slider image"></div>
<div><img src="#" alt="slider image"></div>
</div>
<audio class='player slider' src='audio/06. Family Feud.mp3' controls> </audio>
<div class="music slider" id="titles">
<div><p>#</p>
</div>
<div><p>#</p>
</div>
<div><p>#</p>
</div>
<div><p>#</p>
</div>
</div>
</main>
<a href="#" id="newlink">
<picture>
<source media="(min-width: 650px)" srcset="images/cloud-logo-small.png">
<source media="(min-width: 465px)" srcset="images/type-logo-big.png">
<img src="images/type-logo-big.png" style="width:auto;">
</picture>
</a>
主标签内的幻灯片同步在一起
<script>
$(document).ready(function(){
$('.main').slick({
dots: true,
arrows: false,
autoplay: false,
centerMode: true,
asNavFor: '.music',
slidesToShow: 3,
});
});
</script>
<script>
$(document).ready(function(){
$('.music').slick({
asNavFor:'.main',
mobileFirst: true
});
});
</script>
<script>
$(document).ready(function(){
$('.music').on('beforeChange', playlist);
function playlist(e, s, current, next) {
var list = [
'audio.mp3',
'audio.mp3',
'audio.mp3',
'audio.mp3',
];
$('.player')[0].src = list[next];
$('.player')[0].load();
$('.player')[0].play();
}
});
</script>
<script>
$(document).ready(function(){
$("#newlink").on('beforeChange'){
function links(e, s, current, next) {
var lnk = [
'https://youtube.com',
'https://google.com',
];
$('.blah')[0].href = lnk[next];
}
});
</script>
我使用的其他脚本涉及
$('.your-element').on('swipe', function(event, slick, direction){
console.log(direction);
});
我希望 Logo 图像的 href 能够逐张更改。每张幻灯片都需要一个唯一的 href。
最佳答案
如果我理解正确的话,你的“光滑事件”没有触发。我明白为什么。
您应该重新排序事件绑定(bind),将它们放在元素上调用 slick 之前。让我知道我是否正确。
遇到同样的问题,按照上面的方法解决了。这是 documentation 的要求光滑的旋转木马
关于javascript - 如何更改幻灯片更改时图像的 href,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55620846/