Question

我正在使用fullpage.js并且页面上有一个固定元素，需要根据活动的幻灯片进行更改。因此，基本上如果幻灯片1处于活动状态，则显示固定元素1。如果幻灯片2处于活动状态，则显示固定元素2，依此类推。没有什么对我有用，我无法弄清楚原因。

$('.fp-slidesNav a').click(function() {
        var activeSlide = $('.slide.active');
        if ((activeSlide).hasClass('slide1')) {
            $('fixedelement1').show();
            $('fixedelement1').siblings().hide();
        }
        else if ((activeSlide).hasClass('slide2')) {
            $('fixedelement2').show();
            $('fixedelement2').siblings().hide();
        }
       else if {
         ...
       }
});

我的类名可能有问题，或者我的所有代码中都有错字，但我不这么认为，因为我多次检查了所有内容。这很奇怪，因为我可以做到

 $('a').click(function() {
       alert('hello');
});

当我点击.fp-slidesNav一个锚点并且没有警报但点击另一个随机链接时我收到警报。

Answer 1

使用 afterSlideLoad（anchorLink，index，slideAnchor，slideIndex）

在滚动结束后，一旦加载了部分的幻灯片，就会触发回调。参数：

anchorLink：对应于该部分的anchorLink。

索引：该部分的索引。从1开始。

slideAnchor：与幻灯片对应的锚点（如果有）

slideIndex：幻灯片的索引。从1开始（默认幻灯片不算作幻灯片，但作为一个部分）

如果没有为幻灯片或幻灯片定义anchorLinks，则slideIndex参数将是唯一使用的参数。例如：

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
        var loadedSlide = $(this);

        //first slide of the second section
        if(anchorLink == 'secondPage' && slideIndex == 1){
            alert("First slide loaded");
        }

        //second slide of the second section (supposing #secondSlide is the
        //anchor for the second slide
        if(index == 2 && slideIndex == 'secondSlide'){
            alert("Second slide loaded");
        }
    }
});

Answer 2

我认为@KishoreSahas是对的。但很少有变化/即兴创作

假设页面上的ur fixedelement类似于下面的内容。可能是带有子div标签的section标签

<ul id="fixedelement">
  <li class="slide firstPage active"></li>
  <li class="slide secondPage "></li>
  <li class="slide thirdPage "></li>
  <li class="slide fourthPage "></li>

</ul>

你的滑块代码需要如下所示

$('#myslider').fullpage({
  anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage']
  afterSlideLoad: function(anchorLink, index){
    $('#fixedelement .slide').each(function () {$(this).hide();}
    $('#fixedelement .' + anchorLink).each(function () {$(this).show();}
  }
});

之前我从未使用过fullpage.js，因此上述代码未经过测试。

当某个幻灯片在fullpage.js滑块中有一个活动类时，如何隐藏元素？

2 个答案: