swiper默认显示三个，中间放大且显示全部图片两边显示部分图片的实现方法

2023-07-27 22:43:34

本页面内容最后的红色部分有惊喜哦！

最近在做一个活动页面，要求触摸切换图片时，默认在可视区域中显示三张图片，其中中间的一张图片比其他两张都大且全部显示，而其他两张图片只显示部分即可，于是就想到了swiper这个不依赖于任何js库的插件，但是其官网上没有相应的效果，只有那种可以同时显示三张的demo。但是产品说一定要那种效果，其他的效果不好看，于是我就上网查资料，还真让我找到了解决的办法。如下图：

swiper默认显示三个，中间放大且显示全部图片两边显示部分图片的实现方法

<!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默认显示三个，中间放大且显示全部图片两边显示部分图片的实现方法

以下附上源代码：

swiper默认显示三个，中间放大且显示全部图片两边显示部分图片

以下更新于2017年7月20日：

上边的那种方法在实现起来有点麻烦，不仅要准备大图，还要准备小图，增加了工作量，最近在项目开发中，突然发现了 swiper 官网上其实早就有这样的案例了，只是我疏于仔细查找，所以才搞的这么麻烦，以下我就给大家贴出swiper实例吧(这样的效果和用手机浏览更配哦！)：

3D 覆盖流效果

上一篇：使用nginx实现浏览器跨域请求


下一篇：CCAction、CCFiniteTimeAction、CCSpeed、CCFollow