jquery滑动分页显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery滑动分页示例</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            overflow: hidden;
        }
        .page {
            width: 100%;
            height: 300px;
            display: none;
        }
        .page.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page active" id="page1">
            <h1>Page 1</h1>
            <p>This is the first page.</p>
        </div>
        <div class="page" id="page2">
            <h1>Page 2</h1>
            <p>This is the second page.</p>
        </div>
        <div class="page" id="page3">
            <h1>Page 3</h1>
            <p>This is the third page.</p>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            let currentPage = 1;
            const totalPages = 3;

            function showPage(pageNumber) {
                $('.page').removeClass('active');
                $(`.page#page${pageNumber}`).addClass('active');
            }

            function nextPage() {
                if (currentPage < totalPages) {
                    currentPage++;
                    showPage(currentPage);
                }
            }

            function prevPage() {
                if (currentPage > 1) {
                    currentPage--;
                    showPage(currentPage);
                }
            }

            $(document).on('swipeleft', function() {
                nextPage();
            });

            $(document).on('swiperight', function() {
                prevPage();
            });

            showPage(currentPage);
        });
    </script>
</body>
</html>