css样式

<style>
    .soft-content img{cursor: pointer;}
    .shadow-box{background: rgba(51,52,53,0.75);width: 100%;height: 1080px;position: fixed;top:0;left: 0;visibility: hidden;opacity: 0;display: none;}
    .modal-show{visibility: visible;opacity: 1;z-index: 99999;display: block;}
    .modal{padding: 20px;position: fixed;left: 50%;top:50%;transform: translate(-50%,-50%);background:#fff;border-radius: 10px;}
    .modal-content{padding: 20px 0;}
    .modal-content img{width: 100%;}
    .modal-footer {position: absolute;bottom: 15px;left: 0;width: 100%;}
    .modal-footer .modal-pagination{display: block;width: 100%;text-align: center;}
    .modal-pagination .prev{display: inline-block;padding: 0 15px;}
    .modal-pagination .indicator{display: inline-block;padding: 0 15px;}
    .modal-pagination .next{display: inline-block;padding: 0 15px;}
    .modal-close{position: absolute;top:-10px;right:-10px;}    
    .close{width: 30px;height: 30px;border-radius: 50%;background: #fff;font-size: 16px;font-weight: 700;transition: .5s;}
    .close:hover{transform: rotate(180deg) translateZ(0);background: #a34172;color: #fff;}
</style>

HTML

<html>
    <head>
    <!-- 需要引入JQUERY -->
    </head>
    <body>
        <div class="soft-wrap">
            <div class="soft-content" id="soft-content"><img src=''/></div>
        </div>
        <!-- 模态框开始 -->
        <div class="shadow-box" id="shadow-box">    
    <div class="modal shadow" id="img-modal">
        <div class="modal-title">
            <h2></h2>
        </div>
        <div class="modal-content">
            <img src="" alt="" title="">
        </div>
        <div class="modal-footer">
            <div class="modal-pagination">
                <div class="prev" id="prev">
                    <a href="javascript:void(0);"><< 上一张</a>
                </div>
                <div class="indicator" id="indicator">
                    <span id="now"></span> /  <span id="total"></span>
                </div>
                <div class="next" id="next">
                    <a href="javascript:void(0);">下一张 >></a>
                </div>
            </div>
        </div>
        <div class="modal-close">
            <button class="close">X</button>
        </div>
    </div>
</div>
        <!-- 模态框结束 -->
    </body>
</html>

JS部分

<script>
    $(window).scroll(() => {
        const t = 744;
        var top = (document.getElementById('soft-card').offsetTop) - 77;
        if ($(window).scrollTop() > top && $(window).scrollTop() > t) {
            $('#soft-card').addClass('card-fixed');
        } else {
            $('#soft-card').removeClass('card-fixed');
        }
    })

    // 获取当前img的数组自然下标
    const getIndex = ((arr,item) => {
        for (let i in arr) {
            if (arr[i] == item) {
                return parseInt(i);
            }
        }
    })

    $(() => {
        let _imgArr = Array.from($('.soft-content img'));            // 页面内容区全部的图片
        let _img_index, n = undefined, o = 0, t = _imgArr.length; // 定义初始值, n当前页 o首页,t,尾页 
        console.log('图片数量: %d', t);
        $("#total").text(t);
        // 初次点击
        _imgArr.forEach( item => {
            $(item).click(() => {
                _img_index = getIndex(_imgArr, item);
                $('#now').text(_img_index + 1);
                $('.shadow-box').addClass('modal-show');
                modal(item.title,item.src);
                return;
            });
        });
        // 上一张
        $('#prev').click(() => {
            let now = ($('#now').text() - 1 <= o) ? 1 : $('#now').text() - 1;   // 当前页码
            let prev = (_img_index - 1 <= 0) ? o : _img_index - 1;
            _img_index = prev;
            modal(_imgArr[prev].title,_imgArr[prev].src);
            $('#now').text(now);
            // console.group('prev');
            // console.log(now,prev);
            // console.groupEnd('prev');
        })

        // 下一张
        $('#next').click(() => {
            let now = (parseInt($('#now').text()) + 1 >= t) ? t : parseInt($('#now').text()) + 1;
            let next = (_img_index + 1 >= t) ? _img_index : _img_index + 1;
            _img_index = next;
            modal(_imgArr[next].title,_imgArr[next].src);
            $('#now').text(now);
            /* console.group('next');
            console.log(now,next);
            console.groupEnd('next'); */
        })

    })

    // 关闭模态框
    $('.close').click(() => { $("#shadow-box").removeClass('modal-show'); })

    // 渲染模态框内容
    function modal(title,src) {
        $('.modal-title h2').text(title);
        $('.modal-content img').attr('src',src);
    }
</script>