模擬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;}

測下來整天效果還是很不錯了，基本上手機都會支持！

美中不足的地方就是大圖不能手動放大與縮放！

有好的處理辦法的朋友可以留言告知如何如理，非常感謝