Javascript 设置和清除时间间隔以自动滚动fullPage.js中的部分
我一直在尝试使用fullPage.js创建一个站点,其中有5个垂直部分,其中2个有水平幻灯片。其中一个我想自动横向滚动,另一个我想手动滚动,即由用户控制 到目前为止,我几乎做到了,我将页面渲染后的间隔设置为1500毫秒,并在页面到达第五个“手动”部分时清除此间隔。这里有一个工作版本: 我遇到的两个问题是,在到达第五部分后,当返回到第二个“自动”滚动部分时,滚动不会继续。此外,第5部分在停止前仍会滚动一张幻灯片 以下是我目前的代码:Javascript 设置和清除时间间隔以自动滚动fullPage.js中的部分,javascript,jquery,setinterval,clearinterval,fullpage.js,Javascript,Jquery,Setinterval,Clearinterval,Fullpage.js,我一直在尝试使用fullPage.js创建一个站点,其中有5个垂直部分,其中2个有水平幻灯片。其中一个我想自动横向滚动,另一个我想手动滚动,即由用户控制 到目前为止,我几乎做到了,我将页面渲染后的间隔设置为1500毫秒,并在页面到达第五个“手动”部分时清除此间隔。这里有一个工作版本: 我遇到的两个问题是,在到达第五部分后,当返回到第二个“自动”滚动部分时,滚动不会继续。此外,第5部分在停止前仍会滚动一张幻灯片 以下是我目前的代码: $(document).ready(function() {
$(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回调()吗
非常感谢尝试使用
afterRender
回调来滑动照明没有任何意义
您应该只在第2节中执行此操作,而使用后加载
回调,每次访问节时也会触发该回调
还有一个问题@Alvaro,如果我将自动scolling部分更改为第一个部分,它不会在加载时自动scolling,但只有在导航离开并返回后才会自动scolling。我这里有一个例子:如何更改回调/顺序,以便在用户首次加载页面时它能够正常工作?谢谢您还需要使用
afterRender
,请查看以下内容:
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);
}
}
});
});