jquery实现全屏幻灯片的滚动页面效果

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。全屏幻灯片滚动页面效果是一种网页设计技术，它允许用户在不同的全屏页面之间平滑滚动，每个页面通常包含不同的内容或图像。

类型

全屏幻灯片滚动页面效果可以分为以下几种类型：

垂直滚动：用户通过滚动鼠标滚轮或触摸屏幕上下滑动来切换页面。
水平滚动：用户通过水平滑动来切换页面。
混合滚动：结合垂直和水平滚动，提供更复杂的导航体验。

应用场景

这种效果常用于：

网站首页：展示多个主题或产品。
作品集：展示设计师或摄影师的作品。
活动或会议网站：展示不同的活动或演讲者信息。

实现方法

以下是一个使用 jQuery 实现全屏幻灯片滚动页面效果的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fullscreen Slideshow</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        .section {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2em;
            color: white;
        }
        #section1 { background: #3498db; }
        #section2 { background: #2ecc71; }
        #section3 { background: #e74c3c; }
    </style>
</head>
<body>
    <div id="section1" class="section">Section 1</div>
    <div id="section2" class="section">Section 2</div>
    <div id="section3" class="section">Section 3</div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('body').css('overflow', 'hidden');
            let sections = $('.section');
            let currentIndex = 0;

            function scrollToSection(index) {
                $('html, body').animate({
                    scrollTop: sections.eq(index).offset().top
                }, 1000);
                currentIndex = index;
            }

            $(window).scroll(function() {
                let scrollTop = $(this).scrollTop();
                sections.each(function(index) {
                    if (scrollTop >= $(this).offset().top - 1) {
                        currentIndex = index;
                    }
                });
            });

            $(document).keydown(function(e) {
                if (e.keyCode == 38) { // Up arrow
                    scrollToSection((currentIndex > 0) ? currentIndex - 1 : sections.length - 1);
                } else if (e.keyCode == 40) { // Down arrow
                    scrollToSection((currentIndex < sections.length - 1) ? currentIndex + 1 : 0);
                }
            });
        });
    </script>
</body>
</html>