效果圖
首先需引入支持的插件及樣式，需要注意的是可能會與頁面的其他樣式衝突，引用的時候特別要注意，我當時弄的時候很鬱悶啊樣式衝突很不好調，最後將調好的結果分享給大家
<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="Tibetan 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="Tibetan 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>可在我的資源中下載直接用哦