本頁面內容最后的紅色部分有驚喜哦！
最近在做一個活動頁面，要求觸摸切換圖片時，默認在可視區域中顯示三張圖片，其中中間的一張圖片比其他兩張都大且全部顯示，而其他兩張圖片只顯示部分即可，於是就想到了swiper這個不依賴於任何js庫的插件，但是其官網上沒有相應的效果，只有那種可以同時顯示三張的demo。但是產品說一定要那種效果，其他的效果不好看，於是我就上網查資料，還真讓我找到了解決的辦法。如下圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>互融CLUB</title>
<link rel="stylesheet" href="http://m.hurongclub.com/Resource/css/base_new.css">
<link rel="stylesheet" href="http://m.hurongclub.com/Resource/css/swiper.min.css">
<script src="http://m.hurongclub.com/Resource/js/zepto.min.js"></script>
<script>
//計算根節點HTML的字體大小
function htmlFontsize(){
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 750){
deviceWidth = 750;
}
document.documentElement.style.fontSize = deviceWidth / 7.5 + "px";
}
//根節點HTML的字體大小初始化
htmlFontsize();
$(window).resize(function(){
htmlFontsize();
});
</script>
<style>
body{background: #f4664b;font-size:.14rem;}
.swiper-container{height:8.2rem;}
#investproSwiper{margin-top: 0.52rem;}
#investproSwiper .swiper-slide{width:5rem;height:7.25rem;}
#investproSwiper .swiper-slide .investpro{width:4.61rem;height:6.37rem;background-size: 100% 100%;background-repeat: no-repeat;margin-top: 0.58rem;margin-left: 0.19rem;-webkit-transition: all 0.5s linear;}
#investproSwiper .swiper-slide-active .investpro{width:5.16rem;height:7.25rem;margin-left:-.08rem;margin-top:.12rem;}
#investproSwiper .swiper-slide .hrplan_slide{background-image: url(images/hrplan_small.png);}
#investproSwiper .swiper-slide-active .hrplan_slide{background-image: url(images/hrplan_big.png);}
#investproSwiper .swiper-slide .newhand_slide{background-image: url(images/newhand_small.png);}
#investproSwiper .swiper-slide-active .newhand_slide{background-image: url(images/newhand_big.png);}
#investproSwiper .swiper-slide .sxm_slide{background-image: url(images/sxm_small.png);}
#investproSwiper .swiper-slide-active .sxm_slide{background-image: url(images/sxm_big.png);}
.swiper-slide a{width:3.8rem;height: .7rem;background: #eb4e39;display: block;font-size: .36rem;color: #fff;text-align: center;line-height: .7rem;border-radius: .08rem;position: absolute;left: 0;right: 0;margin: auto;bottom: .85rem;z-index: 2;}
.swiper-slide-active .investpro a{width: 4.33rem;height: .8rem;line-height: .8rem;bottom: .4rem;}
.swiper-container-horizontal>.swiper-pagination{height:.5rem;text-align:center;bottom:0;}
.swiper-pagination-bullet{background:#fff;border-radius:50%;width:.12rem;height:.12rem;margin-left:.18rem;opacity:1;}
.swiper-pagination-bullet-active{background:#e04531;}
.investproTab{width:4.6rem;height:6.37rem;position: absolute;top: 0.58rem;z-index: 2;opacity: 0;}
.investpro-prev{left:-3.6rem;}
.investpro-next{right:-3.6rem;}
</style>
</head>
<body>
<div class="swiper-container" id="investproSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="investpro newhand_slide"><a href="##">立即投資</a></div>
</div>
<div class="swiper-slide">
<div class="investpro sxm_slide"><a href="##">立即投資</a></div>
</div>
<div class="swiper-slide">
<div class="investpro hrplan_slide"><a href="##">立即投資</a></div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="investproTab investpro-prev" id="investpro-prev"></div>
<div class="investproTab investpro-next" id="investpro-next"></div>
</div>
<script src="http://m.hurongclub.com/Resource/js/swiper-3.2.5.min.js"></script>
<script>
var abcSwiper = new Swiper("#investproSwiper", {
slidesPerView: 'auto', //設置slider容器能夠同時顯示的slides數量
centeredSlides: true, //設定為true時，活動塊會居中，而不是默認狀態下的居左。
loop: true,
speed: 500,
noSwiping: false, //設置為true時禁止切換
paginationClickable: false,
pagination : '.swiper-pagination',
prevButton:'#investpro-prev',
nextButton:'#investpro-next'
});
</script>
</body>
</html>
以上代碼中，最開始的那段js是作為移動端的自適應而寫的，不是本文的重點，最后的那段js是swiper官方給出的插件的初始化調用方法，也不多說，最主要的是css代碼：
#investproSwiper .swiper-slide{width:5rem;height:7.25rem;}
#investproSwiper .swiper-slide .investpro{width:4.61rem;height:6.37rem;background-size: 100% 100%;background-repeat: no-repeat;margin-top: 0.58rem;margin-left: 0.19rem;-webkit-transition: all 0.5s linear;}
#investproSwiper .swiper-slide-active .investpro{width:5.16rem;height:7.25rem;margin-left:-.08rem;margin-top:.12rem;}
#investproSwiper .swiper-slide .hrplan_slide{background-image: url(images/hrplan_small.png);}
#investproSwiper .swiper-slide-active .hrplan_slide{background-image: url(images/hrplan_big.png);}
#investproSwiper .swiper-slide .newhand_slide{background-image: url(images/newhand_small.png);}
#investproSwiper .swiper-slide-active .newhand_slide{background-image: url(images/newhand_big.png);}
#investproSwiper .swiper-slide .sxm_slide{background-image: url(images/sxm_small.png);}
#investproSwiper .swiper-slide-active .sxm_slide{background-image: url(images/sxm_big.png);}
它的原理就是中間放大且顯示全部圖片的地方放置的是大圖，而其他兩張只顯示部分圖片的地方放置的是該兩張圖片的小圖，待這兩張中任何一張圖片被切換到中間位置時，顯示的就是它的大圖了，起主要作用的就是swiper的這個swiper-slide-activeclass屬性，當當前元素被添加上了這個class后，那么它的子元素出現的就是大圖了。不過，你事先要給每張圖片都准備一張大圖和一張小圖。
最后，如果想讓兩邊只顯示部分圖片的透明度低一點，我們可以這樣改寫swiper的初始化調用方法：
<script>
var abcSwiper = new Swiper("#investproSwiper", {
slidesPerView: 'auto', //設置slider容器能夠同時顯示的slides數量
centeredSlides: true, //設定為true時，活動塊會居中，而不是默認狀態下的居左。
loop: true,
speed: 500,
noSwiping: false, //設置為true時禁止切換
watchSlidesProgress: true, //開啟這個參數來計算每個slide的progress(進度、進程)
paginationClickable: false,
pagination : '.swiper-pagination',
prevButton:'#investpro-prev',
nextButton:'#investpro-next',
onProgress: function (a) { var b, c, d; for (b = 0; b < a.slides.length; b++) c = a.slides[b], d = c.progress, scale = 1 - Math.min(Math.abs(.2 * d), 1), es = c.style, es.opacity = 1 - Math.min(Math.abs(d / 2), 1), es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = "translate3d(0px,0," + -Math.abs(150 * d) + "px)" },
onSetTransition: function (a, b) { for (var c = 0; c < a.slides.length; c++) es = a.slides[c].style, es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = b + "ms" }
});
</script>
如下圖所示：
以下附上源代碼：
swiper默認顯示三個，中間放大且顯示全部圖片兩邊顯示部分圖片
以下更新於2017年7月20日：
上邊的那種方法在實現起來有點麻煩，不僅要准備大圖，還要准備小圖，增加了工作量，最近在項目開發中，突然發現了 swiper 官網上其實早就有這樣的案例了，只是我疏於仔細查找，所以才搞的這么麻煩，以下我就給大家貼出swiper實例吧(這樣的效果和用手機瀏覽更配哦！)：
3D 覆蓋流效果