使用方法：

首先引入 jQuery

<script src="./fly-zomm-img.min.js"></script>

再引入 圖片瀏覽外掛

<script src="./fly-zomm-img.min.js"></script>

無需額外引入css樣式檔案

HTML結構：

<div id="content">
    <p>
      <img src="./images/swiper-1.jpg" alt="">
    </p>
    <p>
      <img src="./images/swiper-2.jpg" alt="">
    </p>
    <p>
      <img src="./images/swiper-3.jpg" alt="">
    </p>
    <p>
      <img src="./images/swiper-4.jpg" alt="">
    </p>
  </div>
 

所有圖片需要放在一個大DIV裡

配置外掛引數：

<script>
  $('#content').FlyZommImg({
      rollSpeed: 200,//切換速度
      miscellaneous: false,//是否顯示底部輔助按鈕
      closeBtn: true,//是否開啟右上角關閉按鈕
      hideClass: 'hide',//不需要顯示預覽的 class
      imgQuality: 'thumb',//圖片質量型別  thumb 縮圖  original 預設原圖
      slitherCallback: function (direction, DOM) {//左滑動回撥 兩個引數 第一個動向 'left,firstClick,close' 第二個 當前操作DOM
        //console.log(direction,DOM);
      }
    });
</script>
 

效果圖：

原始碼下載地址：

點選下載

如果我的文章對您有幫助，微信或支付寶打賞：