Question

我在网站上使用整页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>

Answer 1

阅读how to cancel a movement before it takes place。

防止向下滑动以在Fullpage js中对鼠标滚轮滚动执行一些其他操作

1 个答案: