實現適配於移動頁面中間的swiper圖片切換

標籤：定位在   rac   text   alt   containe   round   container   flexbox   圖片   

關於swiper圖片切換有很多類型，我就不一一介紹了，可以直接到官網查詢，今天來寫一個適配於頁面正中間的圖片切換，也同時適配於任何圖片的大小（也就是這個圖片切換不用限制圖片的本身大小，特別是移動端動態擷取的圖片有可能大小不一致），所以無論任何圖片若是都想讓其一直處於移動頁面的正中間的話，那麼就要擷取到圖片的tstyle樣式了，好了，不多說，來看代碼，既然是swiper的圖片切換，那麼先要引入swiper的css和js：

 <script type="text/javascript" src="js/swiper.min.js"></script> <link rel="stylesheet" href="css/swiper.min.css">

這兩個不可少，要寫入</head>的上面，接下來看簡單的css實現

<style>        *{margin:0;padding:0;}        body{font-size:14px; -webkit-text-size-adjust: 100%;}        .swiper-container {            width: 100%;            height: 100%;        }        .swiper-slide {            text-align: center;            font-size: 18px;            background-color:#000;            display: -webkit-box;            display: -moz-box;            display: -ms-flexbox;            display: -webkit-flexbox;            display: -moz-flexbox;            display: -webkit-flex;            display: -moz-flex;            display: flex;            -webkit-box-pack: center;            -moz-box-pack: center;            -ms-box-pack: center;            -moz-flex-pack: center;            -ms-flex-pack: center;            -webkit-flex-pack: center;            -webkit-justify-content: center;            -moz-justify-content: center;            justify-content: center;            -webkit-justify-content: center;            -webkit-box-align: center;            -moz-box-align: center;            -ms-flex-align: center;            -webkit-align-items: center;            -moz-align-items: center;            align-items: center;        }        .swiper-slide img{width:100%;height:100%;}        .swiper-slide .title{position:absolute;bottom:0;left:0;width:100%;height:35px;z-index:999}        .swiper-slide .title p{position:absolute;line-height:35px;color:#fff;z-index:9999;left:10px;}        .swiper-slide .fl-bg{width:100%;height:100%;position:absolute;top:0;left:0;background-color:#000;opacity: 0.6;}        .swiper-pagination{position:fixed;color:#fff;}        .slide-info{width:100%;height:auto;position:absolute;top:50%;left:0;}    </style>

我直接寫成內嵌式的css了，然後來看swiper的布局：

<!--需求：圖片處於移動頁面的中間切換--><div class="swiper-container swiper-container-horizontal">    <div class="swiper-wrapper">        <div class="swiper-slide">            <div class="slide-info">                <img src="img/pic1.jpg"  alt="" />                <div class="title">                    <p>圖片一</p>                    <div class="fl-bg" ></div>                </div>            </div>        </div>        <div class="swiper-slide">            <div class="slide-info">                <img src="img/pic2.jpg"  alt="" />                <div class="title">                    <p>圖片二</p>                    <div class="fl-bg" ></div>                </div>            </div>        </div>        <div class="swiper-slide">            <div class="slide-info">                <img src="img/pic3.jpg"  alt="" />                <div class="title">                    <p>圖片三</p>                    <div class="fl-bg" ></div>                </div>            </div>        </div>        <div class="swiper-slide">            <div class="slide-info">                <img src="img/pic4.jpg"  alt="" />                <div class="title">                    <p>圖片一</p>                    <div class="fl-bg" ></div>                </div>            </div>        </div>    </div>    <!-- 如果需要分頁器 -->    <div class="swiper-pagination swiper-pagination-fraction"></div></div>

接下來就是swiper的必須要寫的js效果：

<script>    //這是swiper內建的一些必須要寫的js    var swiper = new Swiper(‘.swiper-container‘, {        pagination: {            el: ‘.swiper-pagination‘,            type: ‘fraction‘,        },        navigation: {            nextEl: ‘.swiper-button-next‘,            prevEl: ‘.swiper-button-prev‘,        },    });    //圖片處於頁面中間的js    //相容不同瀏覽器擷取行間樣式    function getStyle ( obj, attr ) {        return obj.currentStyle?obj.currentStyle[attr] :     getComputedStyle( obj )[attr];    }    window.onload=function(){        var winH = document.body.scrollHeight==0?document.documentElement.scrollHeight:document.body.scrollHeight;        var picH=document.getElementsByClassName("swiper-slide");        for(var i=0;i<picH.length;i++){            var divH=picH[i].getElementsByClassName("slide-info")[0];            var oImg=picH[i].getElementsByTagName("img")[0];            picH[i].index=i;            picH[i].style.height=winH+"px";            divH.style.height = getStyle(oImg,‘height‘);            divH.style.marginTop =-parseFloat(getStyle(oImg,‘height‘))/2+"px";        }    }</script>

好了，這樣簡單的寫一下，效果就會出現，來看簡單的實現圖：

想要實現這個小例子的話，幾個核心點就是：

 1、要適配各種手機，所以要知道每個的頁面的scrollheight；

 2、圖片大小不同的情況下，還要計算的出每張圖片的高度，然後讓其定位在頁面的正中央。

這隻是一個簡單的小例子，但是移動端很有可能會用的到，希望對大家有協助！

實現適配於移動頁面中間的swiper圖片切換