jquery图片分页相册

基础概念

jQuery 图片分页相册是一种使用 jQuery 库来实现图片分页显示的网页应用。它允许用户通过翻页来浏览一组图片，而不是一次性加载所有图片，从而提高页面加载速度和用户体验。

优势

性能优化：分页加载图片可以减少初始加载时间，提高页面响应速度。
用户体验：用户可以根据自己的需求逐页浏览图片，避免一次性加载大量图片导致的页面卡顿。
资源管理：分页加载有助于更好地管理服务器资源和带宽。

类型

静态分页：预先定义好每一页的图片数量，用户只能按固定页数浏览。
动态分页：根据图片总数和每页显示数量动态计算页数，用户可以浏览所有图片。

应用场景

图片库或画廊网站
社交媒体平台
电子商务网站的产品展示
新闻网站的图片新闻

示例代码

以下是一个简单的 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>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .gallery {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .gallery img {
            width: 200px;
            height: 200px;
            margin: 10px;
        }
        .pagination {
            margin-top: 20px;
            text-align: center;
        }
        .pagination button {
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="gallery" id="gallery">
        <!-- 图片将通过 JavaScript 动态加载 -->
    </div>
    <div class="pagination" id="pagination">
        <!-- 分页按钮将通过 JavaScript 动态生成 -->
    </div>

    <script>
        $(document).ready(function() {
            const images = [
                'image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg',
                'image6.jpg', 'image7.jpg', 'image8.jpg', 'image9.jpg', 'image10.jpg'
            ];
            const itemsPerPage = 3;
            let currentPage = 1;

            function loadPage(page) {
                const startIndex = (page - 1) * itemsPerPage;
                const endIndex = startIndex + itemsPerPage;
                const pageImages = images.slice(startIndex, endIndex);

                $('#gallery').empty();
                pageImages.forEach(image => {
                    $('#gallery').append(`<img src="${image}" alt="Image">`);
                });

                updatePagination(page);
            }

            function updatePagination(currentPage) {
                const totalPages = Math.ceil(images.length / itemsPerPage);
                let paginationHtml = '';

                for (let i = 1; i <= totalPages; i++) {
                    paginationHtml += `<button class="page-btn" data-page="${i}">${i}</button>`;
                }

                $('#pagination').empty().html(paginationHtml);

                $('.page-btn').click(function() {
                    currentPage = parseInt($(this).data('page'));
                    loadPage(currentPage);
                });

                $('.page-btn[data-page="' + currentPage + '"]').addClass('active');
            }

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