Question

我在网页上使用Fullpage插件和滑块。

每次用户滚动页面或更改滑块时，我都会在滑块中显示带有动画的div。但是当我更改幻灯片时，除了滚动页面并返回幻灯片部分之外，div正在消失。

要找到问题：

刷新页面，在部分内滚动，div出现在幻灯片中向下滚动，向上... ...
返回幻灯片部分，用箭头更改幻灯片，div出现在第二张幻灯片
问题：再次滚动页面并返回第二张幻灯片可以看到div消失了。

如果存在Fullpage回调解决方案，那将是很好的，如果没有，任何其他解决方案都是可以接受的。

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幻灯片上添加/删除它。您已经在当前滑块上有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');
}

其他一切似乎都没问题。

Js：每次在部分内滚动并返回到幻灯片部分时，在所有幻灯片中都会出现一个div

1 个答案: