图像在滚动和 fullPage.js 上变化

Question

我正在使用 fullPage.js(https://github.com/alvarotrigo/fullPage.js) and I need to have on the second section a scroll with images changing like a movie (Like this http://www.newjumoconcept.com/en/).

我在第二部分添加了一个 class 'sprites' 并停止了整页滚动：normalScrollElements: '.sprites'，我的想法是删除 class 当滚动事件完成，以便 fullPage 继续正常滚动到下一部分。

我一直在阅读有关更改滚动图像的类似问题，但我无法让它工作，而且我不知道如何在滚动完成后删除 class。

这就是我所拥有的：

html:

<section id="second" class="section sprites">
    <div id="sprites"></div>
</section>

css:

#sprites > img:first-child {
opacity: 1;
-ms-filter: none;
filter: none;
}
#sprites > img {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
position:absolute;
width: 100%;
height: 100%;
}

js

jQuery(document).ready(function($){
    $('#fullpage').fullpage({
        ...
        normalScrollElements: '.sprites',
        ...
    });
    preload();
    $('#sprites').on('mousewheel', function(event, index) {
        switchImage();
    });
});
var pics = []; 
function preload(){
    for(i = 1; i < 23; i++) {
        pics[i] = new Image();
        pics[i].src = "i+".jpg"; 
        jQuery('#sprites').append('<img class="sprite" src="' + pics[i].src +'">');
    }
};
function switchImage() {
    var s = jQuery(window).scrollTop()/10;
    var index = Math.floor(s/5);
    jQuery('.sprite').css('opacity','0');
    jQuery('.sprite').eq(index).css('opacity','1');
}

我正在使用 jQuery 鼠标滚轮插件（Brandon Aaron）。

有人能帮我吗？

Answer 1

使用 fullPage.js 提供的回调，例如 afterLoad or onSlideLeave.

 $('#fullpage').fullpage({
     afterLoad: function (anchorLink, index) {
         var loadedSection = $(this);

         //section 3 finished loading
         if (index == 3) {
             $('#myElement').addClass('demo');

             $('#myElement2').removeClass('demo');
         }

     }
 });

Answer 2

谢谢 Alvaro，结合你的建议和这个插件，我终于得到了它： https://github.com/ghepting/javascript-video-scrubber

如果有人正在寻找这样的东西。

图像在滚动和 fullPage.js 上变化

Images changing on scroll and fullPage.js

html

css

jquery

scroll