直接看圖
原版連接下載：（這個點擊非圖片區域是不會關閉的）
https://www.dowebok.com/demo/192/
我的修改版：（修改了一點 js文件和樣式也修改了一點 用的時候記得替換）實現了js動態加載圖片預覽和底部導航欄切換和點擊非圖片區域關閉等
https://files-cdn.cnblogs.com/files/maoye520/viewer%E5%9B%BE%E7%89%87%E6%9F%A5%E7%9C%8B%E6%8F%92%E4%BB%B6%E4%BF%AE%E6%94%B9%E7%89%88.zip
關于js動態使用ajax加載圖片無法更新預覽的問題：
<ul id="dowebok"> <li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="圖片1"></li> <li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="圖片2"></li> <li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="圖片3"></li> <li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="圖片4"></li> <li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="圖片5"></li> <li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="圖片6"></li> </ul>
加入下面的方法：
$(function() { $('#dowebok').viewer({ url: 'data-original', }); });
ps：不懂的直接下載我的修改版下來自己研究。。。如果你還有其他更好的方法推薦，歡迎騷擾~~~
浙公網安備 33010602011771號