Запретить скольжение вниз, чтобы выполнить какое-либо другое действие при прокрутке колесика мыши в Fullpage js - PullRequest
Новая
       60

Запретить скольжение вниз, чтобы выполнить какое-либо другое действие при прокрутке колесика мыши в Fullpage js

0 голосов
/ 24 мая 2018

Я использую полноразмерные js на веб-сайте, и мне нужно остановить определенный слайд, чтобы прокрутить колесо прокрутки мыши вниз.Остальные слайды будут скользить нормально.На 4-м слайде (слайд в моем случае) у меня есть два изображения, которые я хочу показать на прокрутке одно за другим.Первое изображение будет видно по умолчанию, а при прокрутке будет отображаться второе изображение, а первое будет скрыто.Во время этого слайд не будет прокручиваться вниз.Как только появится второе изображение, слайд перейдет к следующему слайду.и функция обратного хода будет выполняться на 4-м слайде при прокрутке вверх. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Fullpage</title>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.min.css" rel="stylesheet">
        <style>
        #fullpage img{width: 100%;}
        #fullpage .section{overflow: hidden;}
        </style>
    </head>
    <body>

        <div id="fullpage">
            <section class="section slide1">
                <div class="image"><img src="https://placeimg.com/1000/750/arch" alt=""></div>
            </section>
            <section class="section slide2">
                <div class="image"><img src="https://placeimg.com/1000/750/tech/sepia" alt=""></div>
            </section>
            <section class="section slide3">
                <div class="image"><img src="https://placeimg.com/1000/750/tech" alt=""></div>
            </section>
            <section class="section slide4">
                <div class="image image1"><img src="https://placeimg.com/1000/750/natureg" alt=""></div>
                <div class="image image2"><img src="https://placeimg.com/1000/750/people" alt=""></div>
            </section>
            <section class="section slide5">
                <div class="image"><img src="https://placeimg.com/1000/750/animals" alt=""></div>
            </section>
            <section class="section slide6">
                <div class="image"><img src="https://placeimg.com/1000/750/tech/grayscale" alt=""></div>
            </section>
        </div>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/vendors/scrolloverflow.min.js"></script>
        <script>
        jQuery(document).ready(function(){
            jQuery('#fullpage').fullpage({
                verticalCentered: true,
                navigation: true,
                navigationPosition: 'right',
                scrollingSpeed: 800,
                scrollBar: true,
                responsiveWidth: 1024,
                afterResponsive: function(isResponsive){}
            });
        });
        </script>
    </body>
</html>

1 Ответ

0 голосов
/ 27 мая 2018
...