javascript - JS : Make a div appear in all slides each time scrolling within sections and returning to slide section

Question

我为我的网页使用全页插件和 slider 。

每当用户滚动页面或更改 slider 时，我都会在 slider 中显示一个带有动画的 div。 但是当我更改幻灯片时，而不是滚动页面并返回幻灯片部分时，div 消失了。

寻找问题:

1. 刷新页面，在部分内滚动，div 出现在幻灯片中
   向下滚动时的部分，向上...
2. 回到幻灯片部分，用箭头改变幻灯片，div出现在 也是第二张幻灯片
3. 问题:再次滚动页面并返回到第二张幻灯片，您 可以看到那个div消失了。

如果有全页回调的解决方案，那就太好了，如果没有，任何其他解决方案都可以接受。

JS:

$('#fullpage').fullpage({
   scrollBar: true,
  scrollingSpeed: 300,
  touchSensitivity: 5,
  paddingTop: '52px',
  sectionSelector: '.section-content',
  slideSelector: '.slide',
  afterLoad: function (anchorLink, index, slideIndex) {

  if (index == 2) {
    $("#section1").find('.features-img').eq(0).addClass('show-zoom');
    $('#section1').find('.features-img').eq(slideIndex).addClass('show-zoom');
        }
        },
  onLeave: function (anchorLink, index, slideIndex) {
   if (index == 2) {
   $("#section1").find('.features-img.show-zoom').eq(0).removeClass('show-zoom');
   $('#section1').find('.features-img.show-zoom').eq(slideIndex).removeClass('show-zoom');
                    }
                },
afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
   if (index == 2) {
      $("#section1").find('.features-img.show-zoom').removeClass('show-zoom');
      $('#section1').find('.features-img').eq(slideIndex).addClass('show-zoom');
                    }
                }

            });

CSS:

.features-img {
  position: relative;
}
.zoom-img{
  -webkit-transform: scale3d(0, 0, 0);
  transform: scale3d(0, 0, 0);
  opacity: 0;
  border: 4px solid #00b8e6;
  border-radius: 50%;
  position: absolute;
  right: -80px;
  bottom: -50px;
  width: 300px;
  height: 300px;
}
.show-zoom .zoom-img {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  overflow: hidden;
  transition: transform 0.8s cubic-bezier(0.42, 0.58, 0.58, 1) 0s, opacity 0.8s linear 0s;
  opacity: 1;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.75);
}

在这里查看:https://jsfiddle.net/maaqms8s/4/

Answer 1

问题出在 eq(0) 中，它仅在第一张幻灯片上添加和删除类，但您需要在 current 幻灯片上添加/删除它。当前 slider 上已有 active 类，因此您可以使用它。

只需修改一下您的代码，问题就会得到解决。

    if (index == 2) {
$("#section1").find('.slide.active').find('.features-img').addClass('show-zoom');
$('#section1').find('.features-img').eq(slideIndex).addClass('show-zoom');
 }
  if (index == 2) {
     $("#section1").find('.slide.active').find('.features-img').removeClass('show-zoom');
 $('#section1').find('.features-img.show-zoom').eq(slideIndex).removeClass('show-zoom');
}

其他一切似乎都还好。