效果图:

===>==>

里面还与很多属性设置: index  关闭按钮等等

代码:

//html-----------------------

<div class="headerPic" id="headerPic">
                <img src="https://www.cnblogs.com/images/cnblogs_com/520BigBear/1196074/t_1.jpg" alt="">
            </div>


//js--------------------------

$('#headerPic').FlyZommImg({
                rollSpeed: 200,//切换速度
                miscellaneous: false,//是否显示底部辅助按钮
                closeBtn: true,//是否打开右上角关闭按钮
                hideClass: 'hideImg',//不需要显示预览的 class
                imgQuality: 'thumb',//图片质量类型  thumb 缩略图  original 默认原图
                slitherCallback: function (direction, DOM) {//左滑动回调 两个参数 第一个动向 'left,firstClick,close' 第二个 当前操作DOM
                setTimeout(function(){
                    // 为了一开始居中显示
                    $('.fly-zoom-box-img').css('width','100%').css('height','auto').css('top',0).css('bottom',0).css('margin','auto');
                },300)
                }
            });

引入jq,  和fly-zomm-img.js====>  链接:https://github.com/Clearlovesky/-js-jq-/blob/master/fly-zomm-img.js

感谢 各位老板  小额打赏:   (有问题call俺)