关于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、图片大小不同的情况下，还要计算的出每张图片的高度，然后让其定位在页面的正中央。
这只是一个简单的小例子，但是移动端很有可能会用的到，希望对大家有帮助！
