我使用fullpage.js来实现垂直和水平滚动。
我想在第2部分滚动时滑块滑动。
与此website
类似的功能这是我的代码:
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
menu: '#menu',
css3: true,
loop: false,
afterLoad: function(anchorLink, index) {
var loadedSection = $(this);
//using index
if (index == 3) {
$.fn.fullpage.setAllowScrolling(false);
$.fn.fullpage.setKeyboardScrolling(false);
$(window).bind('mousewheel DOMMouseScroll', function(event) {
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
$(".fp-prev").click();
if ($(".fp-slide:first-child").hasClass("active")) {
$.fn.fullpage.setAllowScrolling(true);
$.fn.fullpage.setKeyboardScrolling(true);
}
} else {
$(".fp-next").click();
if ($(".fp-slide:last-child").hasClass("active")) {
$.fn.fullpage.setAllowScrolling(true);
$.fn.fullpage.setKeyboardScrolling(true);
}
}
});
}
}
});
});
答案 0 :(得分:8)
终于搞定了:
var slideIndex = 1,
sliding = false;
$(document).ready(function(){
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
scrollingSpeed:1000,
css3: true,
onLeave: function(index, nextIndex, direction) {
if(index == 2 && !sliding) {
if(direction == 'down' && slideIndex < 5) {
sliding = true;
$.fn.fullpage.moveSlideRight();
slideIndex++;
return false;
} else if(direction == 'up' && slideIndex > 1) {
sliding = true;
$.fn.fullpage.moveSlideLeft();
slideIndex--;
return false;
}
} else if(sliding) {
return false;
}
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
sliding = false;
}
});
});
答案 1 :(得分:3)
这是一个更精细的例子,它恢复了@undefinedtoken的代码:)
例子代码:
$(document).ready(function () {
var slideIndex2 = 1, sliding = false;
$('#fullpage').fullpage({
// ...your cutom code...
//events
onLeave : function (index, nextIndex, direction) {
if (index == 3 && !sliding) {
if (direction == 'down' && slideIndex2 < 4) {
sliding = true;
$.fn.fullpage.moveSlideRight();
return false;
} else if (direction == 'up' && slideIndex2 > 1) {
sliding = true;
$.fn.fullpage.moveSlideLeft();
return false;
}
} else if (sliding) {
return false;
}
},
afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
sliding = false;
},
onSlideLeave : function (anchorLink, index, slideIndex, direction, nextSlideIndex) {
if (index == 3) {
if (direction == 'right') {
sliding = true;
slideIndex2++;
}
if (direction == 'left') {
sliding = true;
slideIndex2--;
}
}
}
});
});