效果图
首先需引入支持的插件及样式，需要注意的是可能会与页面的其他样式冲突，引用的时候特别要注意，我当时弄的时候很郁闷啊样式冲突很不好调，最后将调好的结果分享给大家
<script src="viewer.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="viewer.css">
页面代码
<div class="docs-pictures clearfix">
<img class="viewer-list" data-original="<%=basePath %><s:property value='VC_FILE_SRC'/>"
src="<%=basePath %><s:property value='VC_YS_SRC'/>" align="middle" alt="<s:property value='VC_FILE_DES'/>" style="cursor: pointer;" />
</div>
data-original 点击放大图的路径
alt 提示标题，也就是图片中划掉的部分
点击某一张会轮播 class="docs-pictures clearfix" 内的图片，即使页面写多个div class 都是 class="docs-pictures clearfix"的也不能实现一次性播放所有图片，也就是说一个 class="docs-pictures clearfix" 播放一次，那怎么实现不管点击哪一张都能将页面所有的图片都播放呢？最后我是将所有的 class="docs-pictures clearfix" 都加加上所有的图片，不显示的用hidden
<div class="docs-pictures clearfix">
<img data-original="1.jpg" src="thumbnails/1.jpg" alt="Cuo Na Lake">
<img data-original="2.jpg" src="thumbnails/2.jpg" alt="* Plateau">
<img data-original="3.jpg" src="thumbnails/3.jpg" alt="Jokhang Temple">
<img data-original="4.jpg" src="thumbnails/4.jpg" alt="Potala Palace 1">
<img data-original="5.jpg" src="thumbnails/5.jpg" alt="Potala Palace 2">
<img data-original="6.jpg" src="thumbnails/6.jpg" alt="Potala Palace 3">
<img data-original="7.jpg" src="thumbnails/7.jpg" alt="Lhasa River">
<img data-original="8.jpg" src="thumbnails/8.jpg" alt="Namtso 1">
<img data-original="9.jpg" src="thumbnails/9.jpg" alt="Namtso 2">
<!--hidden="true" 页面不显示图片 但是点击查看大图播放时可查看 -->
<img hidden="true" data-original="1.jpg" src="thumbnails/1.jpg" alt="Cuo Na Lake">
<img hidden="true" data-original="2.jpg" src="thumbnails/2.jpg" alt="* Plateau">
<img hidden="true" data-original="3.jpg" src="thumbnails/3.jpg" alt="Jokhang Temple">
<img hidden="true" data-original="4.jpg" src="thumbnails/4.jpg" alt="Potala Palace 1">
<img hidden="true" data-original="5.jpg" src="thumbnails/5.jpg" alt="Potala Palace 2">
<img hidden="true" data-original="6.jpg" src="thumbnails/6.jpg" alt="Potala Palace 3">
<img hidden="true" data-original="7.jpg" src="thumbnails/7.jpg" alt="Lhasa River">
<img hidden="true" data-original="8.jpg" src="thumbnails/8.jpg" alt="Namtso 1">
<img hidden="true" data-original="9.jpg" src="thumbnails/9.jpg" alt="Namtso 2">
</div>
可在我的资源中下载直接用哦