在向下滚动时更改元素的背景图像5次

我想在页面上有一个向下滚动的效果，当你到达一张幻灯片时，它会停在那张幻灯片上但是当你继续向下滚动时，元素的背景图像会不断变化。 我在看scrolldeck.js http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

要做到这一点，但我不知道如何删除/添加类取决于使用滚动的数量。 有什么线索吗？ 谢谢！

Answer 1

您可以使用窗口滚动来确定要显示的图像和时间。 快速举例。

var currentUrl = null; var imageControl = function( event ) { var fromTop = $(window).scrollTop(), // The distance from the top of the page url = null; if(fromTop < 2000) { url = 'http://placehold.it/1000/FF0'; } else if (fromTop > 2000) { url = 'http://placehold.it/1000/F00'; } if(url !== currentUrl) { $('body').css('background', 'url(' + url + ')'); currentUrl = url; } }; $(window).scroll(imageControl); 

演示： http ： //jsfiddle.net/2Pfsy/

您可以对此进行很多改进，因此当它不需要等时它不运行此代码….