这是一款不依赖任何射流研究…框架、纯爪哇岛描述语言实现的画廊效果。它支持移动设备手势操作，如手势触摸滑动、放大和关闭图片，它还支持个人电脑上的键盘操作，总之它是网开发者不可或缺的图片画廊插件，它叫照片擦除。

展示效果图如下：

查看演示下载源码

超文本标记语言

首先加载所需的半铸钢钢性铸铁(铸造半钢)和射流研究…文件。

链接rel='样式表href=' CSS/photoswipe。CSS ' link rel='样式表href=' CSS/default-skin/default-skin。' CSS '脚本src=' http : js/photoswipe。量滴js /脚本src=' http : js/photos wipe-ui-default。量滴js /脚本以上文件大家不要担心，月光光都打包好了，您只管下载拿去用就是。

接下来，准备身体里的超文本标记语言部分。我们在页面里准备图片缩略图，当点击这张缩略图时，会弹出对应的大图集，我们准备

超文本标记语言结构如下：

div id=' photos ' img src=' http : images/S1 _ m . jpg ' alt=' Image description '/p图集/p /div现在，重要的画廊展示部分将为大图展示提供架构，注意以下代码中的元素：pswp _ _ bg .pswp _ _滚动换行，pswp _ _容器和pswp _ _项这几个差异不可更改。

div class='pswp' tabindex='-1 '角色=' dialog ' aria-hidden=' true ' div class=' pswp _ _ BG '/div class=' pswp _ _ scroll-wrap ' div class=' pswp _ _ container ' div class=' pswp _ _ item '/div class=' pswp _ _ item '/div/div class=' pswp _ _ ui pswp _ _ ui-hidden ' div class=' pswp _ _隐藏“左”标题=“上一个(向左箭头)'/button button class=' pswp _ _ button pswp _ _ button-arrow-right ' title=' Next(向右箭头)'/button div class=' pswp _ _ caption ' div class=' pswp _ _ caption _ _ center '/div/div/div/div以上超文本标记语言结构定义了画廊展示的内容、工具、方向按钮、标题说明等元素。

爪哇岛描述语言

我们在射流研究…里定义图集图片集合（当然也可以像demo2一样在超文本标记语言部分定义图片集),设置各种选项，然后通过使用新的照片擦除()来调用照片擦除插件。

var openPhotoSwipe=function(){ var pswpElement=document。queryselectorall(' .pswp ')[0]；//定义图片集合var items=[{ src : ' images/S1。jpg '，w: 800，h: 1142 }，{ src: 'images/s2.jpg '，w: 800，h : 1142 }]；var options={ history: false，focus: false，showAnimationDuration: 0，hideaanaimationduration : 0 }；var gallery=new PhotoSwipe(pswpElement，PhotoSwipeUI_Default，items，options)；画廊。init()；};//点击图集元素时触发调用打开photoswipe文档。getelementbyid('照片').onclick=openPhotoSwipe大家可以将该款插件应用到移动项目中去，更多选项设置请参考照片擦除项目地址：https://github。com/dimsemenov/照片擦除。

以上内容就是爪哇岛描述语言实现支持移动设备画廊的全部内容，希望大家喜欢。