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>

每一个效果的实现，都是通过自己逻辑思维一层一层的实现的，主要是多思考。

jq点击相册弹出弹窗并可以轮播相册效果

相关推荐