简单粗暴的移动端图片浏览插件demo

使用方法：

首先引入 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>

效果图：

源码下载地址：

点击下载

 

如果我的文章对您有帮助，微信或支付宝打赏：

微信

 

支付宝