我一直在尝试使用 fullPage.js 创建一个网站,其中有 5 个垂直部分,其中 2 个有水平幻灯片。其中一个我想自动横向滚动,另一个我想手动滚动,即由用户控制。
到目前为止,我已经差不多完成了,我将页面渲染后的间隔设置为 1500 毫秒,并在页面到达第 5 个“手动”部分时清除此间隔。这里有一个工作版本:
http://jsfiddle.net/2dhkR/187/
我遇到的两个问题是,到达第五部分后,返回到第二个“自动”滚动部分时,滚动不会恢复。此外,第五部分在停止之前仍然滚动一张幻灯片。
这是我到目前为止的代码:
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
sectionsColor: ['#8FB98B', 'navy', '#EAE1C0', '#333333', '#AA4321'],
slidesNavigation: true,
loopBottom: true,
afterRender: function(){
idInterval = setInterval(function(){
$.fn.fullpage.moveSlideRight();
}, 1500);
},
//turns off the automatic scrolling. NEEDS TO BE TURNED BACK ON
afterLoad: function(anchorLink, index){
//using index
if(index == 5){
clearInterval(idInterval);
}
}
});
});
我尝试重置此后的间隔,使用:
if(index == 2){
setInterval(function(){
$.fn.fullpage.moveSlideRight();
}, 1500);
}
但这不起作用,并且似乎加快了自动滚动的速度。
有人可以帮我订购这些命令,并决定使用哪个 fullpage.js 回调( https://github.com/alvarotrigo/fullPage.js#callbacks )吗?
非常感谢
最佳答案
尝试使用 afterRender
回调来 sliderRight 没有任何意义。
您应该只在第二部分执行此操作,而是使用 afterLoad
回调,该回调也会在您每次访问某个部分时触发。
var idInterval;
$(document).ready(function () {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
sectionsColor: ['#8FB98B', 'green', '#EAE1C0', '#333333', '#AA4321'],
slidesNavigation: true,
loopBottom: true,
afterLoad: function (anchorLink, index) {
if (index == 2) {
idInterval = setInterval(function () {
$.fn.fullpage.moveSlideRight();
}, 1500);
}
//using index
if (index == 5) {
clearInterval(idInterval);
}
}
});
});
关于javascript - 设置和清除间隔以自动滚动 fullPage.js 中的部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26849126/