Question

所以我有幻灯片旋转木马（适用于 fullPage.js ）：

<div id="myContainer">
  <div class="section" data-anchor="skynet">
    <div class="slide one" data-anchor="main">
      Slide 1
    </div>

    <div class="slide two" data-anchor="about_us">
      Slide 2
    </div>

    <div class="slide three" data-anchor="faq">
      Slide 3
    </div>

    <div class="slide four" data-anchor="news">
      Slide 4
    </div>
  </div>
</div>

我有一些背景块

<div class="bg-main" id="bgOne"></div>
<div class="bg-main" id="bgTwo"></div>
<div class="bg-main" id="bgThree"></div>
<div class="bg-main" id="bgFour"></div>

通过将类激活添加到具有类.one，.two等的块来幻灯片交换。我尝试将类添加到具有背景的块，具体取决于活动幻灯片。例如 - 如果.slide.two具有类.active，请将类添加到块#bgTwo。这是我目前的JS。它不起作用：

<script type="text/javascript">
    $(document).ready(function(){ 
      if ( $('#myContainer .one').hasClass('active') ) {
        $('.bg-main').removeClass('active');
        $('#bgOne').addClass('active'); 
        } else if ( $('#myContainer .two').hasClass('active') )
           {
          $('.bg-main').removeClass('active');
          $('#bgTwo').addClass('active');
        }
      });
    </script>

Answer 1

所以我发现fullpage.js使用事件afterSlideLoad。这就是我的解决方案：

＆＃13;

<script type="text/javascript">
      $(document).ready(function() {
        $('#myContainer').fullpage({
          anchors: ['skynet'],
          menu: '#menu',
          scrollingSpeed: 500,
          normalScrollElements: '.modal',
          scrollOverflow: true,
        

          afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
          var loadedSlide = $(this);

          if(slideIndex == 0){
            $('.bg-main').removeClass('active');
            $('#bgOne').addClass('active');}

          if(slideIndex == 1){
            $('.bg-main').removeClass('active');
            $('#bgTwo').addClass('active');}

          if(slideIndex == 2){
            $('.bg-main').removeClass('active');
            $('#bgThree').addClass('active');}

          if(slideIndex == 3){
            $('.bg-main').removeClass('active');
           $('#bgFour').addClass('active');}
          }
        })
      });
    </script>

＆＃13;

仅在更改幻灯片后添加类，而不是在过程本身期间添加。背景并没有像我想的那样快速变化，但这是我能做到的最好的事情。

Answer 2

使用回调onSlideLeave

演示

＆＃13;

array.each do |obj|
   print "*"
   obj.some_long_executing_process
end

# This increments nicely to give the dev some indication of progress / time until completion
>> ******

＆＃13;

$(document).ready(function() {
  $('#fullPage').fullpage({
    onSlideLeave: function(link, secIdx, sldIdx, dir, next) {
      $('.test .bg-main').removeClass('active');
      $('.test .bg-main').eq(next).addClass('active');
    }
  });
});

＆＃13;

.slide {
  text-align: center
}

.test {
  position: fixed;
  top: 75%;
  right:calc(50% - 220px);
}

.bg-main {
  height: 30px;
  width: 100px;
  background: grey;
  display:inline-block;
  text-align:center;
  outline:1px solid #fff;
  margin:0;
}

.one,
#bgOne.active {
  background: #fc0;
}

.two,
#bgTwo.active {
  background: #f00;
}

.three,
#bgThree.active {
  background: #0f0;
}

.four,
#bgFour.active {
  background: #00f;
}

＆＃13;

Answer 3

完美的解决方案是扩展fullpage.js以处理该功能。这是一种解决方法：

<script type="text/javascript">
    var updateClasses = function(){
        var activeClass = 'active';
        var eq = $('#myContainer').children(activeClass).eq();
        var bgMain = $('.bg-main').removeClass(activeClass);
        bgMain.eq(eq).addClass(activeClass);
    }; 
    $(document).ready(function(){
         $(".fp-controlArrow").on("click.updateClasses", function(){
             updateClasses();
         });
    });
</script>

根据其他元素添加和删除类

3 个答案:

演示