模拟app上商品详情点击图片放大并且可以切换大图

主要使用swiper插件，这里使用各小技巧，就是用两个swiper容器，点击一个小图容器，去让大图容器展示出来

 

小图容器

 <div class="q_banner">

            <div class="swiper-container">
                <div class="swiper-wrapper">

                    <div class="swiper-slide preview">
                        <a href="images/img_01.jpg"><img src="images/img_01.jpg" alt="" /></a>

                    </div>
                    <div class="swiper-slide preview">
                        <a href="images/img_02.jpg"><img src="images/img_02.jpg" alt="" /></a>

                    </div>
                    <div class="swiper-slide preview">
                        <a href="images/img_03.jpg"><img src="images/img_03.jpg" alt="" /></a>
                    </div>

                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>

遮罩层

 <div class="mask"></div>

大图容器

<div class="wrap_big">
        <div class="swiper-container_big">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="images/img_01.jpg" alt="" />
                </div>
                <div class="swiper-slide">
                    <img src="images/img_02.jpg" alt="" />
                </div>
                <div class="swiper-slide">
                    <img src="images/img_03.jpg" alt="" />
                </div>

            </div>
           
        </div>
    </div>

小图切换js

   <!-- photo Swiper -->
    <script>
        var swiper = new Swiper('.q_banner .swiper-container', {
            pagination: '.swiper-container .swiper-pagination',
            paginationClickable: true

        });
    </script>

点击小图展示大图并且切换js

$(function(){
    $('.q_banner .swiper-slide').each(function(index){
        $(this).click(function(){
            $('.mask').show();
            var thisIndex = index;
            $('.wrap_big').show();
            $('html,body').css('overflow','hidden');
            var swiper = new Swiper('.wrap_big .swiper-container_big', {
                paginationClickable: true,
                initialSlide:thisIndex
            });
        });
    });
    $('.mask').click(function(){
        $('.mask').hide();
        $('.wrap_big').hide()
    });
    $('.wrap_big').each(function(index){
        $(this).click(function(){
            $('html,body').css('overflow','auto');
            $(this).hide();
            $('.mask').hide();

        });
    });
});

部分样式

.mask{ width: 100%; height: 100%; background: rgba(0,0,0,1); position:fixed; top:0; left: 0; z-index: 9998; display: none;}
.wrap_big{ width: 100%; position: fixed; left: 0; top: 50%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); z-index: 9999; display: none; }

.swiper-container {width: 100%; }
.swiper-wrapper{ width: 100%;}
.swiper-slide { width: 100%; }
.swiper-pagination-bullet-active{ background: red;}

测下来整天效果还是很不错了，基本上手机都会支持！

美中不足的地方就是大图不能手动放大与缩放！

有好的处理办法的朋友可以留言告知如何如理，非常感谢