Question

对于http://www.rawkey.co.in，我使用的是fullpage.js。现在，我想使用鼠标滚轮迭代页面，而不是单击箭头按钮来遍历页面。有人可以帮忙吗？来自http://www.rawkey.co.in/js/jquery.fullpage.js：

    $(window).mousewheel(function(event, delta) {
      if (delta > 0){
        function moveSlideRight(section){
            moveSlide('right', section);
        }
      } // going down
      if(delta < 0){
        function moveSlideLeft(section){
            moveSlide('left', section);
        }
      } //going up
      event.preventDefault();
    });

Answer 1

如果您仍需要此方面的帮助，请参阅下面的工作代码段（不要担心缺少CSS：P）。

你必须注意到js原样：

在第一张幻灯片上向上滚动将转到＆＃34;上一页＆＃34;部分（如果存在）。
在最后一张幻灯片中向下滚动将转到＆＃34;下一步＆＃34;部分（如果存在）。

您可能需要根据您的其他需要进行调整;）。

修改

更正了错误消息＆＃34; $（...）。moveSection [Up | Down]不是函数＆＃34; ，因为不需要调用这些函数。

＆＃13;
＆＃13;
$('#fullpage').fullpage({ //Navigation menu: '#menu', lockAnchors: false, anchors: [], navigation: false, navigationPosition: 'right', navigationTooltips: ['firstSlide', 'secondSlide', 'thirdSlide', 'fourthSlide'], showActiveTooltip: true, slidesNavigation: true, slidesNavPosition: 'bottom', //Scrolling css3: true, scrollingSpeed: 700, autoScrolling: true, fitToSection: true, fitToSectionDelay: 1000, scrollBar: false, easing: 'easeInOutCubic', easingcss3: 'ease', loopBottom: false, loopTop: false, loopHorizontal: true, continuousVertical: false, interlockedSlides: false, offsetSections: false, resetSliders: false, fadingEffect: false, normalScrollElements: '#element1, .element2', scrollOverflow: false, scrollOverflowReset: false, scrollOverflowOptions: null, touchSensitivity: 15, normalScrollElementTouchThreshold: 5, bigSectionsDestination: null, //Accessibility keyboardScrolling: true, animateAnchor: true, recordHistory: true, //Design controlArrows: true, verticalCentered: true, sectionsColor: ['#0061ff', '#ff0000'], paddingTop: '0', paddingBottom: '0px', fixedElements: '#header, .footer', responsiveWidth: 0, responsiveHeight: 0, //Custom selectors sectionSelector: '.section', slideSelector: '.slide', lazyLoading: true, //events onLeave: function(index, nextIndex, direction) {}, afterLoad: function(anchorLink, index) {}, afterRender: function() {}, afterResize: function() {}, afterResponsive: function(isResponsive) {}, afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {}, onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex) {} }); $('.slide').on('mousewheel', function(e, delta) { if (delta == 1) { // Up // Move to previous section if this is first slide in slider if ($(this).is(":first-child")) return true; $('.fp-prev').trigger('click'); e.preventDefault(); e.stopPropagation(); } else { // Down // Move to next section if this is last slide in slider if ($(this).is(":last-child")) return true; $('.fp-next').trigger('click'); e.preventDefault(); e.stopPropagation(); } });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.min.css" rel="stylesheet" /> <div id="fullpage"> <div class="section">hey hey hey</div> <div class="section slider"> <div class="slide"> Slide 1 </div> <div class="slide"> Slide 2 </div> <div class="slide"> Slide 3 </div> <div class="slide"> Slide 4 </div> </div> <div class="section">Ho ho ho</div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

The easiest and most secure way to do so is by making use of the Scroll Horizontally extension provided by fullpage.js.

This way:

You make sure it will be 100% compatible with any other features & extensions.
You make sure it won't brake with fullpage.js updates or fullPage.js API changes.

Right now your the proposed solution by @Bladepianist:

Won't work on touch devices.
Will create issues in kinetic scrolling devices.
Won't be compatible with other extensions.
Won't work when removing the arrows.

检测鼠标滚动并调用函数

2 个答案: