jq點擊相冊彈出彈窗並可以輪播相冊效果

相冊圖片點擊彈出預覽且支持圖片切換jquery特效代碼。

實現效果：

1.點擊圖片，彈出遮罩層；

2.點擊遮罩層左右箭頭，實現輪播；

3.點擊關閉圖，關閉遮罩層。

css代碼

<style type="text/css">
        .bigImg {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            height: 480px;
            width: 70%;
        }
        
        .bigImg .smallPrev {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            height: 80px;
        }
        
        .bigImg .smallNext {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            height: 80px;
        }
        
        .bigImg .smallPrev img,
        .bigImg .smallNext img {
            padding: 20px;
        }
        
        .detailInfoLeft {
            background: rgba(0, 0, 0, 0.56);
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 88;
            display: none;
        }
        
        .big_bigImgWrap img {
            display: none;
            margin: auto;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            height: 480px;
            width: 70%;
        }
        
        .dispaly_blo {
            display: block !important;
        }
        
        .i_close {
            position: absolute;
            top: -40px;
            right: 0px;
            padding: 20px;
        }
    </style>

代碼主體

<div>
            <div class="small_smallWrap fl">
                <div class="small_bigWrap clearfix">
                    <a href="###"><img src="images/small1.png" alt="" data-src="images/small1.png"></a>
                    <a href="###"><img src="images/small2.jpg" alt="" data-src="images/small2.jpg"></a>
                    <a href="###"><img src="images/small3.jpg" alt="" data-src="images/small3.jpg"></a>
                    <a href="###"><img src="images/small4.jpg" alt="" data-src="images/small4.jpg"></a>
                    <a href="###"><img src="images/small5.jpg" alt="" data-src="images/small5.jpg"></a>
                    <a href="###"><img src="images/syp.png" alt="" data-src="images/syp.png"></a>
                </div>
            </div>

            <div class="detailInfoLeft ">
                <div class="bigImg">
                    <a href="###" class="smallPrev"><img src="images/arrowLeft.png" alt=""></a>
                    <div class="big_smallImgWrap">
                        <div class="big_bigImgWrap clearfix">
                            <img src="images/small1.png" class="dispaly_blo" alt="">
                        </div>
                    </div>
                    <a href="###" class="smallNext"><img src="images/arrowRight.png" alt=""></a>
                    <div class="i_close">
                        <img src="images/bigCancel.png" />
                    </div>
                </div>
            </div>
        </div>

js效果

<script>
            var smallImgLen = $('.small_bigWrap a').length;
            var bigImgLen = $('.big_bigImgWrap img').length;
            oc_lun_img();
            //點擊小圖片換大圖片
            $('.small_bigWrap a img').on('click', function() {
                $(".detailInfoLeft").addClass("dispaly_blo");
                oc_lun($(this));
            });
            var img_src = "";

            function oc_lun(obj) {
                img_src = obj.attr("data-src");
                img_pra_index = obj.parent().index();
                $('.big_bigImgWrap img').attr('src', img_src);
                oc_lun_img(img_pra_index);
            }
            //關閉
            $(".i_close").click(function(event) {
                event.stopPropagation();
                $(".detailInfoLeft").removeClass("dispaly_blo");
            });

            function oc_lun_img(i) {
                //點擊右小圖片的next按鈕.
                $('.smallNext').on('click', function(event) {
                    event.stopPropagation();
                    i++;
                    if(i == smallImgLen) {
                        i = 0;
                    }
                    $('.big_bigImgWrap img').attr('src', $('.small_bigWrap a').eq(i).find("img").attr('data-src'));
                })
                //點擊左小圖片的prev按鈕.
                $('.smallPrev').on('click', function(event) {
                    event.stopPropagation();
                    i--;
                    if(i <= -1) {
                        i = smallImgLen - 1;
                    }
                    $('.big_bigImgWrap img').attr('src', $('.small_bigWrap a').eq(i).find("img").attr('data-src'));
                })
            }
        </script>

 

每一個效果的實現，都是通過自己邏輯思維一層一層的實現的，主要是多思考。