jquery实现 灯箱封装

html代码

<div id="container">
    <figure>
        <img src="../images/1.jpg" alt=""/>
        <figcaption>刚刚好就一个你</figcaption>
    </figure>
    <figure>
        <img src="../images/2.jpg" alt=""/>
        <figcaption>黑暗的角落也会生出光明</figcaption>
    </figure>
    <figure>
        <img src="../images/3.jpg" alt=""/>
        <figcaption>努力过的时光会自带高光</figcaption>
    </figure>
    <figure>
        <img src="../images/4.jpg" alt=""/>
        <figcaption>因为孤独</figcaption>
    </figure>
    <figure>
        <img src="../images/5.jpg" alt=""/>
        <figcaption></figcaption>
    </figure>
    <figure>
        <img src="../images/6.jpg" alt=""/>
        <figcaption>趁时光整好我们未老</figcaption>
    </figure>
    <figure>
        <img src="../images/7.jpg" alt=""/>
        <figcaption>从你那里收过的最珍贵的礼物</figcaption>
    </figure>
    <figure>
        <img src="../images/8.jpg" alt=""/>
        <figcaption>原来有你在的时候四季才开始更替</figcaption>
    </figure>
    <figure>
        <img src="../images/9.jpg" alt=""/>
        <figcaption>带着泪水的勇敢也是一种成长</figcaption>
    </figure>
</div>

css代码

* {
    margin: 0;
    padding: 0;
}

/*图片列表*/
#container {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    border: 1px solid red;
}

figure {
    position: relative;
    width: 32%;
    height: 200px;
    margin-bottom: 10px;
    border: 1px solid black;
}

figcaption {
    color: white;
    position: absolute;
    right: 5px;
    bottom: 0;
    margin: auto;
    display: none;
}

#container figure:hover figcaption{
    display: inline-block;
}

figure > img {
    width: 100%;
    height: 200px;
}

/*点击图片后的展示区域*/
#bigImg {
    width: 100%;
    height: 100%;
    background-color: rgba(249, 250, 244, 0.5);
    position: fixed;
    top: 0;
    right: 0;
    display: none;
}

#main {
    background-color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

#main img {
    margin: 0 40px;
}

.glyphicon {
    font-size: 30px;
    background-color: rgba(47, 47, 47, 0.5);
    margin: 0 10px;
    color: white;
}

#closeBtn {
    position: absolute;
    right: 0;
    top: 10px;
    font-size: 16px;
}

调用封装好的方法

$(function () {
    lightbox.init();
})

封装的代码

(function () {
    function init() {//初始化
        _addZhezhao();//添加遮罩层
        _addFigureClick();//显示遮罩
        _getImagesList();//获取所有图片
        _prevEvent();//上一页
        _nextEvent();//下一页
        closeZheZhao();//关闭遮罩层
    }

    let imgArr = []//获取所有图片
    let index;

//1、添加遮罩层
    function _addZhezhao() {
        let zheZhaoHtml = `<div id="bigImg">
    <div id="main">
        <span class="glyphicon glyphicon-chevron-left" id="prev-Btn"></span>
        <img src="" alt="">
        <span class="glyphicon glyphicon-chevron-right" id="next-Btn"></span>
        <span class="glyphicon glyphicon-remove" id="closeBtn"></span>
    </div>
</div>`;
        $('body').append(zheZhaoHtml);
    }

//2、点击任意图片，显示对应的大图
    function _addFigureClick() {
        $('figure').click(function (e) {
            //1-1显示遮罩层
            $('#bigImg').show()
            //1-2、获取点击的图片，将图片显示出来
            $('#main img').attr('src', $(e.target).attr('src'));
        });
    }

//3、获取所有图片
    function _getImagesList() {
        imgArr = $('figure img').get();
    }

//4、获取当前图片的下标
    function _nowIndex() {
        for (let i = 0; i < imgArr.length; i++) {
            if ($(imgArr[i]).attr('src') == $('#main img').attr('src')) {
                //返回当前图片的下标
                index = i;
                break;
            }
        }
    }

//5、点击上一页
    function _prevEvent() {
        $('#prev-Btn').click(prevImg)
    }

    function prevImg() {
        _nowIndex()
        index--;
        if (index == -1) {
            index = imgArr.length - 1;
        }
        $('#main img').attr('src', $(imgArr[index]).attr('src'));
    }

//6、点击下一页
    function _nextEvent() {
        $('#next-Btn').click(nextImg)
    }

    function nextImg() {
        _nowIndex();
        index++;
        if (index == imgArr.length) {
            index = 0;
        }
        $('#main img').attr('src', $(imgArr[index]).attr('src'));
    }

//7、关闭遮罩层
    function closeZheZhao() {
        //6、点击关闭按钮，关闭遮罩层
        $('#closeBtn').click(function () {
            $('#bigImg').hide()
        })
    }

    window.lightbox = {init, prevImg, nextImg}
})();