Viewer.js 是一款強大的圖片檢視器

第一步：要引入一個css和js

css和js地址：https://github.com/18736871304/commonJs/tree/main/dist

jquery版本：

<ul id="sucaihuo">
            <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>

var viewer = new Viewer(document.getElementById('sucaihuo'), {
            url: 
 
'data-original'
        });
或者：
var viewer = new Viewer(document.getElementById('sucaihuo'));

Vue版本：

 這是在methods中都可以使用
this.$nextTick(() => {
            $('.sucaihuo').viewer('destroy');//銷燬例項化物件， 如果不銷燬，會出現上一次的圖片，這次的則顯示不出來
            $('.sucaihuo').viewer({
              url: 'data-original',
            });
          })
也可以這樣寫:
這是在剛請求回來的資料中（mounted）使用
mounted(){ 
const ViewerDom = document.getElementById('index');
const viewer = new Viewer(ViewerDom, { 
// 相關配置項,詳情見下面 
}); 
}