在使用deck.js制作幻灯片时,要让它在单击时前进,可以通过在HTML代码中添加一些JavaScript代码来实现。以下是一个简单的示例:
<div class="deck-container">
<div class="deck-slide">
<h1>幻灯片 1</h1>
</div>
<div class="deck-slide">
<h1>幻灯片 2</h1>
</div>
<div class="deck-slide">
<h1>幻灯片 3</h1>
</div>
</div>
document.addEventListener('DOMContentLoaded', function() {
var deck = new Deck();
var slides = document.querySelectorAll('.deck-slide');
slides.forEach(function(slide, index) {
slide.addEventListener('click', function() {
deck.go(index);
});
});
});
这段代码首先等待文档加载完成,然后创建一个新的deck.js实例。接着,它获取所有的幻灯片元素,并为每个幻灯片添加一个单击事件监听器。当单击某个幻灯片时,它会调用deck.js实例的go()
方法,将幻灯片前进到对应的索引位置。
这样,当用户单击某个幻灯片时,deck.js就会前进到该幻灯片的位置。请注意,这个示例仅用于演示目的,实际应用中可能需要根据具体需求进行调整。
领取专属 10元无门槛券
手把手带您无忧上云