使用方法:
首先引入 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>
效果图:
源码下载地址: