1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <link rel="stylesheet" href="./photoswipe/photoswipe/photoswipe.css"> 9 <link rel="stylesheet" href="./photoswipe/photoswipe/default-skin/default-skin.css"> 10 <title>Document</title> 11 <style> 12 .swiperImg { 13 100%; 14 height: 200px; 15 } 16 17 .img { 18 100%; 19 height: 100%; 20 object-fit: cover; 21 } 22 </style> 23 </head> 24 25 <body> 26 <div class="swiper-slide" id="picData"> 27 <div class="swiperImg"> 28 <img onclick="clickImgToZoom()" class="img" 29 src="https://img11.artimg.net/mini-site-admin/sxzt/sxmm/images/d9b2d0c91b8e8a639a80b63f3e0d90f4.jpg" 30 alt=""> 31 </div> 32 </div> 33 34 35 <!-- Root element of PhotoSwipe. Must have class pswp. --> 36 <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> 37 <div class="pswp__bg"></div> 38 <div class="pswp__scroll-wrap"> 39 <div class="pswp__container"> 40 <div class="pswp__item"></div> 41 <div class="pswp__item"></div> 42 <div class="pswp__item"></div> 43 </div> 44 <div class="pswp__ui pswp__ui--hidden"> 45 <div class="pswp__top-bar"> 46 <div class="pswp__counter hidden"></div> 47 <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> 48 <div class="pswp__preloader"> 49 <div class="pswp__preloader__icn"> 50 <div class="pswp__preloader__cut"> 51 <div class="pswp__preloader__donut"></div> 52 </div> 53 </div> 54 </div> 55 </div> 56 <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> 57 <div class="pswp__share-tooltip"></div> 58 </div> 59 <div class="pswp__caption"> 60 <div class="pswp__caption__center"></div> 61 </div> 62 </div> 63 <div class="pswp__side_box iphone_x_footer"> 64 <div class="pswp__side_li"></div> 65 <div class="pswp__side_li"></div> 66 </div> 67 </div> 68 69 </div> 70 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> 71 72 <script src="./photoswipe/photoswipe/photoswipe.min.js"></script> 73 <script src="./photoswipe/photoswipe/photoswipe-ui-default.min.js"></script> 74 <script> 75 // 图片放大 76 function clickImgToZoom(_index) { 77 var index = _index || $(".swiper-slide-active").attr("data-swiper-slide-index") 78 // 修改这是多张的 轮播样式的 79 // var temp = $("#picData").html() 80 // console.log(temp); 81 var items = [{ 82 src: 'https://img11.artimg.net/mini-site-admin/sxzt/sxmm/images/d9b2d0c91b8e8a639a80b63f3e0d90f4.jpg', 83 w: 600, 84 h: 900 85 }] 86 // temp.forEach(i => { 87 // items.push({ 88 // src: i.url, 89 // w: i.width, 90 // h: i.height 91 // }) 92 // }) 93 94 var currentLink = items[0].src 95 var options = { 96 items: items, 97 index: Number(0) 98 } 99 100 var side = $(".pswp__side_box"), 101 html = "" 102 options.items.forEach(function (item, _index) { 103 _index == options.index ? html += "<div class="pswp__side_li active"></div>" : html += 104 "<div class="pswp__side_li"></div>" 105 }) 106 side.html(html) 107 108 function photoInit(options) { 109 var pswpElement = document.querySelectorAll(".pswp")[0] 110 // Initializes and opens PhotoSwipe 111 var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, options.items, { 112 index: options.index 113 }) 114 gallery.init() 115 gallery.listen("afterChange", function (index) { 116 $(".pswp__side_box .active").removeClass("active") 117 $(".pswp__side_li").eq(this.getCurrentIndex()).addClass("active") 118 }) 119 } 120 121 photoInit(options) 122 123 } 124 </script> 125 </body> 126 127 </html>
前提是先引入iQuery文件
插入两个<link>css样式
插入两个<script>js样式
这个在网上可以找到*******************