1. PingCode智库首页
  2. 百科

js图册怎么增加页

Edit2 • • 百科

js图册怎么增加页

在JavaScript中增加图册页面的方法有多种，包括手动添加新页面、使用插件动态生成、通过API调用等。本文将详细介绍这些方法，并重点阐述如何使用插件动态生成新页面，以便为不同需求的用户提供丰富详实的解决方案。

一、手动添加新页面

手动添加新页面是一种最简单直接的方法，适合小型项目或初学者。以下是一个基本的示例：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Photo Gallery</title>


</head>


<body>


    <div id="gallery">


        <img src="image1.jpg" alt="Image 1">


        <img src="image2.jpg" alt="Image 2">


        <!-- Add more images here -->


    </div>


    <button id="addPage">Add Page</button>


    <script>


        document.getElementById('addPage').addEventListener('click', function() {


            var newImage = document.createElement('img');


            newImage.src = 'newImage.jpg';


            newImage.alt = 'New Image';


            document.getElementById('gallery').appendChild(newImage);


        });


    </script>


</body>


</html>

在这个示例中，通过点击按钮可以手动添加新的图片到图册中。虽然这种方法简单，但在处理大量图片或需要复杂交互时可能不太适用。

二、使用插件动态生成新页面

对于需要动态生成新页面的复杂项目，使用插件是一种高效且易于维护的方法。以下是一些常见的JavaScript图册插件：

1、PhotoSwipe

PhotoSwipe是一个非常流行的JavaScript图册插件，支持触摸手势和动态加载。以下是一个基本的使用示例：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <link rel="stylesheet" href="photoswipe.css">


    <link rel="stylesheet" href="default-skin/default-skin.css">


    <title>PhotoSwipe Gallery</title>


</head>


<body>


    <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">


        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">


            <a href="large-image1.jpg" itemprop="contentUrl" data-size="1024x768">


                <img src="small-image1.jpg" itemprop="thumbnail" alt="Image description" />


            </a>


        </figure>


        <!-- Add more figures here -->


    </div>


    <!-- Root element of PhotoSwipe. Must have class pswp. -->


    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">


        <div class="pswp__bg"></div>


        <div class="pswp__scroll-wrap">


            <div class="pswp__container">


                <div class="pswp__item"></div>


                <div class="pswp__item"></div>


                <div class="pswp__item"></div>


            </div>


            <div class="pswp__ui pswp__ui--hidden">


                <div class="pswp__top-bar">


                    <div class="pswp__counter"></div>


                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>


                    <button class="pswp__button pswp__button--share" title="Share"></button>


                    <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>


                    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>


                    <div class="pswp__preloader">


                        <div class="pswp__preloader__icn">


                            <div class="pswp__preloader__cut">


                                <div class="pswp__preloader__donut"></div>


                            </div>


                        </div>


                    </div>


                </div>


                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">


                    <div class="pswp__share-tooltip"></div> 


                </div>


                <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>


                <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>


                <div class="pswp__caption">


                    <div class="pswp__caption__center"></div>


                </div>


            </div>


        </div>


    </div>


    <script src="photoswipe.min.js"></script>


    <script src="photoswipe-ui-default.min.js"></script>


    <script>


        var initPhotoSwipeFromDOM = function(gallerySelector) {


            var parseThumbnailElements = function(el) {


                var thumbElements = el.childNodes,


                    numNodes = thumbElements.length,


                    items = [],


                    figureEl,


                    linkEl,


                    size,


                    item;


                for(var i = 0; i < numNodes; i++) {


                    figureEl = thumbElements[i];


                    if(figureEl.nodeType !== 1) {


                        continue;


                    }


                    linkEl = figureEl.children[0];


                    size = linkEl.getAttribute('data-size').split('x');


                    item = {


                        src: linkEl.getAttribute('href'),


                        w: parseInt(size[0], 10),


                        h: parseInt(size[1], 10)


                    };


                    if(figureEl.children.length > 1) {


                        item.title = figureEl.children[1].innerHTML; 


                    }


                    if(linkEl.children.length > 0) {


                        item.msrc = linkEl.children[0].getAttribute('src');


                    } 


                    item.el = figureEl;


                    items.push(item);


                }


                return items;


            };


            var closest = function closest(el, fn) {


                return el && ( fn(el) ? el : closest(el.parentNode, fn) );


            };


            var onThumbnailsClick = function(e) {


                e = e || window.event;


                e.preventDefault ? e.preventDefault() : e.returnValue = false;


                var eTarget = e.target || e.srcElement;


                var clickedListItem = closest(eTarget, function(el) {


                    return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');


                });


                if(!clickedListItem) {


                    return;


                }


                var clickedGallery = clickedListItem.parentNode,


                    childNodes = clickedListItem.parentNode.childNodes,


                    numChildNodes = childNodes.length,


                    nodeIndex = 0,


                    index;


                for (var i = 0; i < numChildNodes; i++) {


                    if(childNodes[i].nodeType !== 1) { 


                        continue; 


                    }


                    if(childNodes[i] === clickedListItem) {


                        index = nodeIndex;


                        break;


                    }


                    nodeIndex++;


                }


                if(index >= 0) {


                    openPhotoSwipe( index, clickedGallery );


                }


                return false;


            };


            var photoswipeParseHash = function() {


                var hash = window.location.hash.substring(1),


                params = {};


                if(hash.length < 5) {


                    return params;


                }


                var vars = hash.split('&');


                for (var i = 0; i < vars.length; i++) {


                    if(!vars[i]) {


                        continue;


                    }


                    var pair = vars[i].split('=');  


                    if(pair.length < 2) {


                        continue;


                    }           


                    params[pair[0]] = pair[1];


                }


                if(params.gid) {


                    params.gid = parseInt(params.gid, 10);


                }


                return params;


            };


            var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {


                var pswpElement = document.querySelectorAll('.pswp')[0],


                    gallery,


                    options,


                    items;


                items = parseThumbnailElements(galleryElement);


                options = {


                    galleryUID: galleryElement.getAttribute('data-pswp-uid'),


                    getThumbBoundsFn: function(index) {


                        var thumbnail = items[index].el.getElementsByTagName('img')[0],


                            pageYScroll = window.pageYOffset || document.documentElement.scrollTop,


                            rect = thumbnail.getBoundingClientRect(); 


                        return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};


                    }


                };


                if(fromURL) {


                    if(options.galleryPIDs) {


                        for(var j = 0; j < items.length; j++) {


                            if(items[j].pid === index) {


                                options.index = j;


                                break;


                            }


                        }


                    } else {


                        options.index = parseInt(index, 10) - 1;


                    }


                } else {


                    options.index = parseInt(index, 10);


                }


                if( isNaN(options.index) ) {


                    return;


                }


                if(disableAnimation) {


                    options.showAnimationDuration = 0;


                }


                gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);


                gallery.init();


            };


            var galleryElements = document.querySelectorAll( gallerySelector );


            for(var i = 0, l = galleryElements.length; i < l; i++) {


                galleryElements[i].setAttribute('data-pswp-uid', i+1);


                galleryElements[i].onclick = onThumbnailsClick;


            }


            var hashData = photoswipeParseHash();


            if(hashData.pid && hashData.gid) {


                openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );


            }


        };


        initPhotoSwipeFromDOM('.my-gallery');


    </script>


</body>


</html>

在这个示例中，我们使用了PhotoSwipe插件来创建一个动态图册，支持触摸手势和图片放大缩小功能。这样不仅提升了用户体验，还简化了代码的维护。

2、Lightbox

Lightbox也是一个常见的JavaScript图册插件，易于使用，以下是一个基本的使用示例：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <link rel="stylesheet" href="lightbox.css">


    <title>Lightbox Gallery</title>


</head>


<body>


    <div id="gallery">


        <a href="large-image1.jpg" data-lightbox="mygallery" data-title="Image 1">


            <img src="small-image1.jpg" alt="Image 1">


        </a>


        <!-- Add more images here -->


    </div>


    <button id="addPage">Add Page</button>


    <script src="lightbox-plus-jquery.min.js"></script>


    <script>


        document.getElementById('addPage').addEventListener('click', function() {


            var newLink = document.createElement('a');


            newLink.href = 'new-large-image.jpg';


            newLink.setAttribute('data-lightbox', 'mygallery');


            newLink.setAttribute('data-title', 'New Image');


            var newImage = document.createElement('img');


            newImage.src = 'new-small-image.jpg';


            newImage.alt = 'New Image';


            newLink.appendChild(newImage);


            document.getElementById('gallery').appendChild(newLink);


        });


    </script>


</body>


</html>

在这个示例中，我们使用了Lightbox插件来创建一个动态图册，通过点击按钮可以动态添加新的图片。Lightbox插件的使用简单且功能强大，适合大部分项目。

三、通过API调用

对于需要从服务器获取图片数据并动态生成图册的项目，可以使用API调用来实现。这种方法适合大型项目和需要频繁更新图册内容的应用。

1、使用Fetch API

Fetch API是一个现代的JavaScript API，用于发出网络请求。以下是一个使用Fetch API动态生成图册的示例：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>API Gallery</title>


</head>


<body>


    <div id="gallery"></div>


    <button id="loadImages">Load Images</button>


    <script>


        document.getElementById('loadImages').addEventListener('click', function() {


            fetch('https://api.example.com/images')


                .then(response => response.json())


                .then(data => {


                    var gallery = document.getElementById('gallery');


                    data.forEach(image => {


                        var img = document.createElement('img');


                        img.src = image.url;


                        img.alt = image.title;


                        gallery.appendChild(img);


                    });


                })


                .catch(error => console.error('Error:', error));


        });


    </script>


</body>


</html>

在这个示例中，我们使用Fetch API从服务器获取图片数据，并动态生成图册。通过点击按钮可以加载更多图片，非常适合需要频繁更新内容的项目。

2、使用Axios

Axios是一个基于Promise的HTTP库，适用于浏览器和Node.js。以下是一个使用Axios动态生成图册的示例：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>API Gallery with Axios</title>


</head>


<body>


    <div id="gallery"></div>


    <button id="loadImages">Load Images</button>


    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>


    <script>


        document.getElementById('loadImages').addEventListener('click', function() {


            axios.get('https://api.example.com/images')


                .then(response => {


                    var gallery = document.getElementById('gallery');


                    response.data.forEach(image => {


                        var img = document.createElement('img');


                        img.src = image.url;


                        img.alt = image.title;


                        gallery.appendChild(img);


                    });


                })


                .catch(error => console.error('Error:', error));


        });


    </script>


</body>


</html>

在这个示例中，我们使用Axios从服务器获取图片数据，并动态生成图册。Axios的使用非常简单，且支持更多高级功能，如拦截器、中断请求等，非常适合复杂项目。

四、综合使用

在实际项目中，可能需要综合使用上述多种方法，以满足不同的需求。例如，可以通过API调用获取图片数据，并使用插件动态生成图册，同时保留手动添加新页面的功能。

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <link rel="stylesheet" href="photoswipe.css">


    <link rel="stylesheet" href="default-skin/default-skin.css">


    <title>Comprehensive Gallery</title>


</head>


<body>


    <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery" id="gallery">


        <!-- Dynamically generated images will be inserted here -->


    </div>


    <button id="loadImages">Load Images</button>


    <button id="addPage">Add Page</button>


    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">


        <div class="pswp__bg"></div>


        <div class="pswp__scroll-wrap">


            <div class="pswp__container">


                <div class="pswp__item"></div>


                <div class="pswp__item"></div>


                <div class="pswp__item"></div>


            </div>


            <div class="pswp__ui pswp__ui--hidden">


                <div class="pswp__top-bar">


                    <div class="pswp__counter"></div>


                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>


                    <button class="pswp__button pswp__button--share" title="Share"></button>


                    <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>


                    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>


                    <div class="pswp__preloader">


                        <div class="pswp__preloader__icn">


                            <div class="pswp__preloader__cut">


                                <div class="pswp__preloader__donut"></div>


                            </div>


                        </div>


                    </div>


                </div>


                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">


                    <div class="pswp__share-tooltip"></div> 


                </div>


                <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>


                <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>


                <div class="pswp__caption">


                    <div class="pswp__caption__center"></div>


                </div>


            </div>


        </div>


    </div>


    <script src="photoswipe.min.js"></script>


    <script src="photoswipe-ui-default.min.js"></script>


    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>


    <script>


        document.getElementById('loadImages').addEventListener('click', function() {


            axios.get('https://api.example.com/images')


                .then(response => {


                    var gallery = document.getElementById('gallery');


                    response.data.forEach(image => {


                        var figure = document.create

相关问答FAQs：

1. 如何在JavaScript图册中增加新的页面？
您可以通过以下步骤在JavaScript图册中增加新的页面：

  • Step 1：创建一个新的HTML文件，可以使用文本编辑器（如Notepad++）或IDE（如Visual Studio Code）来创建一个新的HTML文件，命名为您希望的页面名称（例如，page2.html）。

  • Step 2：链接新的页面到图册，在图册的某一页上，找到适合的位置插入一个链接到新页面的元素。使用HTML的<a>标签，并设置href属性为新页面的文件路径（例如，<a href="page2.html">点击这里查看新页面</a>）。

  • Step 3：设计新页面的内容，在新的HTML文件中，使用HTML和CSS来设计页面的内容。您可以添加文本、图片、视频、表格等元素，使其与图册的其他页面保持一致。

  • Step 4：保存并预览，保存您的HTML文件，并在浏览器中打开图册的入口文件。点击链接，检查新页面是否成功添加到图册中。

2. 图册中如何插入新的页面？
要在JavaScript图册中插入新的页面，您可以按照以下步骤进行操作：

  • Step 1：创建一个新的HTML文件，使用任何文本编辑器或IDE，创建一个新的HTML文件，将其命名为您希望的页面名称（例如，page2.html）。

  • Step 2：在图册的某一页上插入链接，找到图册中适合的位置，在该位置插入一个指向新页面的链接。使用HTML的<a>标签，并设置href属性为新页面的文件路径（例如，<a href="page2.html">点击这里查看新页面</a>）。

  • Step 3：设计新页面的内容，在新的HTML文件中，使用HTML和CSS来设计新页面的内容。您可以添加文本、图像、视频等元素，使其与图册的其他页面保持一致。

  • Step 4：保存并预览，保存您的HTML文件，并在浏览器中打开图册的主页。点击链接，检查新页面是否已成功插入到图册中。

3. 如何在JavaScript图册中增加新的页面？
如果您想在JavaScript图册中增加新的页面，可以按照以下步骤进行操作：

  • Step 1：创建一个新的HTML文件，使用任何文本编辑器或IDE创建一个新的HTML文件，并为其命名为您希望的页面名称（例如，page2.html）。

  • Step 2：在图册的某一页上添加链接，找到图册中适合的位置，在该位置插入一个链接指向新页面。使用HTML的<a>标签，并设置href属性为新页面的文件路径（例如，<a href="page2.html">点击这里查看新页面</a>）。

  • Step 3：设计新页面的内容，在新的HTML文件中，使用HTML和CSS来设计新页面的内容。您可以添加文本、图像、视频等元素，以使其与图册的其他页面保持一致。

  • Step 4：保存并预览，保存您的HTML文件，并在浏览器中打开图册的入口文件。点击链接，检查新页面是否已成功添加到图册中。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3539908

赞 (0)
Edit2Edit2
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部