javascript - 如何在幻灯片更改时更改 img 的 href
问题描述
我正在使用光滑的滑块幻灯片。我试图在幻灯片前进时更改徽标图像的 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);
});
我希望徽标图像的 href 可以逐张更改幻灯片。每张幻灯片都需要一个唯一的 href。
解决方案
如果我理解正确,您的“巧妙事件”不会触发。我明白为什么了。
您应该通过在元素上调用 slick 之前放置事件绑定来重新排序事件绑定。让我知道我是否正确。
有同样的问题并通过上述方法解决了。这是slick-carousel文档的要求
推荐阅读
- python - conda build 错误:找不到 pytest-runner 的匹配分布
- java - 重定向到另一个页面时如何保存数据
- r - 仅在下载时禁止数据表中的行名
- python - Numpy uint16 加法无溢出异常
- python - 可以monkeypatch numpy 数组切片行为吗?
- css - 为什么我的汉堡菜单上的转换不起作用?
- hibernate - JPA Hibernate - 如何从字符串数组“String []”创建表
- html - 当其余页面是用简单的 HTML5 编写时,是否可以通过 PUG 将一页添加到现有的父系项目中?
- google-cloud-platform - GCP KMS API 支持的最大文本大小
- swift - 如何使用 Swift 和 Cocoa 获取当前活动窗口