photoswipe.js使用
https://photoswipe.com/styling/
html直接调用
<!DOCTYPE html> <html> <head> <title>Test Gallery</title> </head> <body> <script src="./photoswipe.umd.min.js"></script> <script src="./photoswipe-lightbox.umd.min.js"></script> <link rel="stylesheet" href="photoswipe.css"> <div class="test-gallery"> <a class="aaa" href="https://dummyimage.com/1200x600/000/fff" data-pswp-width="1200" data-pswp-height="600"> <img src="https://dummyimage.com/120x60/000/fff" alt="" /> </a> <a class="aaa" href="https://dummyimage.com/1200x1200/000/fff" data-pswp-width="1200" data-pswp-height="1200"> <img src="https://dummyimage.com/60x60/000/fff" alt="" /> </a> <a class="aaa" href="https://dummyimage.com/600x1200/000/fff" data-pswp-width="600" data-pswp-height="1200"> <img src="https://dummyimage.com/30x60/000/fff" alt="" /> </a> </div> <script type="text/javascript"> var lightbox = new PhotoSwipeLightbox({ gallery: '.test-gallery', //区域class children: '.aaa', //指定轮播对象class //bgOpacity: 1, //背景透明度 //showHideAnimationType: 'zoom', //打开关闭过渡动画 pswpModule: PhotoSwipe }); lightbox.init(); </script> </body> </html>