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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6. <meta name="format-detection" content="telephone=no">
  7. <title>互融CLUB</title>
  8. <link rel="stylesheet" href="http://m.hurongclub.com/Resource/css/base_new.css">
  9. <link rel="stylesheet" href="http://m.hurongclub.com/Resource/css/swiper.min.css">
  10. <script src="http://m.hurongclub.com/Resource/js/zepto.min.js"></script>
  11. <script>
  12. //计算根节点HTML的字体大小
  13. function htmlFontsize(){
  14.     var deviceWidth = document.documentElement.clientWidth;
  15.     if(deviceWidth > 750){
  16.         deviceWidth = 750;
  17.     }
  18.     document.documentElement.style.fontSize = deviceWidth / 7.5 + "px";
  19. }
  20. //根节点HTML的字体大小初始化
  21. htmlFontsize();
  23. $(window).resize(function(){
  24.     htmlFontsize();
  25. });
  26. </script>
  27. <style>
  28. body{background: #f4664b;font-size:.14rem;}
  29. .swiper-container{height:8.2rem;}
  30. #investproSwiper{margin-top: 0.52rem;}
  31. #investproSwiper .swiper-slide{width:5rem;height:7.25rem;}
  32. #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;}
  33. #investproSwiper .swiper-slide-active .investpro{width:5.16rem;height:7.25rem;margin-left:-.08rem;margin-top:.12rem;}
  34. #investproSwiper .swiper-slide .hrplan_slide{background-image: url(images/hrplan_small.png);}
  35. #investproSwiper .swiper-slide-active .hrplan_slide{background-image: url(images/hrplan_big.png);}
  36. #investproSwiper .swiper-slide .newhand_slide{background-image: url(images/newhand_small.png);}
  37. #investproSwiper .swiper-slide-active .newhand_slide{background-image: url(images/newhand_big.png);}
  38. #investproSwiper .swiper-slide .sxm_slide{background-image: url(images/sxm_small.png);}
  39. #investproSwiper .swiper-slide-active .sxm_slide{background-image: url(images/sxm_big.png);}
  40. .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;}
  41. .swiper-slide-active .investpro a{width: 4.33rem;height: .8rem;line-height: .8rem;bottom: .4rem;}
  42. .swiper-container-horizontal>.swiper-pagination{height:.5rem;text-align:center;bottom:0;}
  43. .swiper-pagination-bullet{background:#fff;border-radius:50%;width:.12rem;height:.12rem;margin-left:.18rem;opacity:1;}
  44. .swiper-pagination-bullet-active{background:#e04531;}
  45. .investproTab{width:4.6rem;height:6.37rem;position: absolute;top: 0.58rem;z-index: 2;opacity: 0;}
  46. .investpro-prev{left:-3.6rem;}
  47. .investpro-next{right:-3.6rem;}
  48. </style>
  49. </head>
  50. <body>
  51. <div class="swiper-container" id="investproSwiper">
  52.     <div class="swiper-wrapper">
  53.         <div class="swiper-slide">
  54.             <div class="investpro newhand_slide"><a href="##">立即投资</a></div>
  55.         </div>
  56.         <div class="swiper-slide">
  57.             <div class="investpro sxm_slide"><a href="##">立即投资</a></div>
  58.         </div>
  59.         <div class="swiper-slide">
  60.             <div class="investpro hrplan_slide"><a href="##">立即投资</a></div>
  61.         </div>
  62.     </div>
  63.     <div class="swiper-pagination"></div>
  64.     <div class="investproTab investpro-prev" id="investpro-prev"></div>
  65.     <div class="investproTab investpro-next" id="investpro-next"></div>
  66. </div>
  67. <script src="http://m.hurongclub.com/Resource/js/swiper-3.2.5.min.js"></script>
  68. <script>
  69.     var abcSwiper = new Swiper("#investproSwiper", {
  70.         slidesPerView: 'auto',   //设置slider容器能够同时显示的slides数量
  71.         centeredSlides: true,    //设定为true时，活动块会居中，而不是默认状态下的居左。
  72.         loop: true,
  73.         speed: 500,
  74.         noSwiping: false,        //设置为true时禁止切换
  75.         paginationClickable: false,
  76.         pagination : '.swiper-pagination',
  77.         prevButton:'#investpro-prev',
  78.         nextButton:'#investpro-next'
  79.     });
  80. </script>
  81. </body>
  82. </html>

以上代码中，最开始的那段js是作为移动端的自适应而写的，不是本文的重点，最后的那段js是swiper官方给出的插件的初始化调用方法，也不多说，最主要的是css代码：

  1. #investproSwiper .swiper-slide{width:5rem;height:7.25rem;}
  2. #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;}
  3. #investproSwiper .swiper-slide-active .investpro{width:5.16rem;height:7.25rem;margin-left:-.08rem;margin-top:.12rem;}
  4. #investproSwiper .swiper-slide .hrplan_slide{background-image: url(images/hrplan_small.png);}
  5. #investproSwiper .swiper-slide-active .hrplan_slide{background-image: url(images/hrplan_big.png);}
  6. #investproSwiper .swiper-slide .newhand_slide{background-image: url(images/newhand_small.png);}
  7. #investproSwiper .swiper-slide-active .newhand_slide{background-image: url(images/newhand_big.png);}
  8. #investproSwiper .swiper-slide .sxm_slide{background-image: url(images/sxm_small.png);}
  9. #investproSwiper .swiper-slide-active .sxm_slide{background-image: url(images/sxm_big.png);}

它的原理就是中间放大且显示全部图片的地方放置的是大图，而其他两张只显示部分图片的地方放置的是该两张图片的小图，待这两张中任何一张图片被切换到中间位置时，显示的就是它的大图了，起主要作用的就是swiper的这个swiper-slide-activeclass属性，当当前元素被添加上了这个class后，那么它的子元素出现的就是大图了。不过，你事先要给每张图片都准备一张大图和一张小图。

最后，如果想让两边只显示部分图片的透明度低一点，我们可以这样改写swiper的初始化调用方法：

  1. <script>
  2.     var abcSwiper = new Swiper("#investproSwiper", {
  3.         slidesPerView: 'auto',   //设置slider容器能够同时显示的slides数量
  4.         centeredSlides: true,    //设定为true时，活动块会居中，而不是默认状态下的居左。
  5.         loop: true,
  6.         speed: 500,
  7.         noSwiping: false,        //设置为true时禁止切换
  8.         watchSlidesProgress: true,    //开启这个参数来计算每个slide的progress(进度、进程)
  9.         paginationClickable: false,
  10.         pagination : '.swiper-pagination',
  11.         prevButton:'#investpro-prev',
  12.         nextButton:'#investpro-next',
  13.         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)" },
  14.         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" }
  15.     });
  16. </script>

如下图所示：

以下附上源代码：

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

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

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

3D 覆盖流效果

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

  1. swiper轮播问题之二：默认显示3张图片，中间显示全部两边显示部分

    其二:项目遇到比较有点要求的轮播图,默认显示3张图片,中间显示全部,两边显示部分.如图: 网上找了也没有找到合适的,最后经过自己摸索写了出来,贴出代码分享给大家.         CSS .swipe ...

  2. java：JQuery（声明，JQ和JS对象的区别，prop，attr，addClass，offset，trigger，dblclick和change事件，hide，show，toggle，slideUp，slideDown，slideToggle，三种选择器，标签的获取，三张图片的放大与缩小）

    1.JQuery: jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计 的宗旨是“ ...

  3. Lodop背景图无图片时显示放大叉号问题

    正常情况下,如果指定图片路径中,图片不存在或指定错误的路径,会因为找不到图片显示叉号,Lodop背景图如果设置了背景图宽度高度控制,显示的叉号也会被相应的放大,形成放大的模糊的图案,看起来就像是黑色边 ...

  4. Menu显示三个点,不显示内容

    先说下menu的使用 首先自定义一个menu选项 <menu xmlns:android="http://schemas.android.com/apk/res/android&quo ...

  5. echarts使用记录（三）：x/y轴数据和刻度显示及坐标中网格显示、格式化x/y轴数据

    1.去掉坐标轴刻度线,刻度数据,坐标轴网格,以Y轴为例,同理X轴 xAxis: [{ type: 'category', axisTick: {//决定是否显示坐标刻度 alignWithLabel: ...

  6. 在HTML中显示图片时希望如果图片不存在或者无法显示时,能够显示默认图片

    很多时候,在HTML中显示图片时希望如果图片不存在或者无法显示时,能够显示默认图片.可以通过以下方式: <img src="xxx.jpg" onError="th ...

  7. css文本超出隐藏 显示三个点

    文本超出显示三个点一般分两种情况 一,单行文本超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 二,多行文本超出隐藏 ...

  8. zencart设置默认货币三种方法

    zencart设置默认货币为USD 方法一:mysql UPDATE configuration SET configuration_value = 'USD' WHERE configuration ...

  9. HTML横向滚动条和文本超出显示三个小圆点

    我们这次要说的就是:现在有很多的公司以及很多的app软件经常使用的两个方法横向滚动条和文本超出三个小圆点 横向滚动条:顾名思义嘛,就是能够一块内容可以横着滑动. 文本超出三个小圆点:文本超出就是当文本 ...

随机推荐

  1. POJ 2914 Minimum Cut【最小割 Stoer-Wangner】

    题意:求全局最小割 不能用网络流求最小割,枚举举汇点要O(n),最短增广路最大流算法求最大流是O(n2m)复杂度,在复杂网络中O(m)=O(n2),算法总复杂度就是O(n5):就算你用其他求最大流的算 ...

  2. 标准C语言实现基于TCP/IP协议的文件传输

    TCP/IP编程实现远程文件传输在LUNIX中一般都采用套接字(socket)系统调用. 采用客户/服务器模式,其程序编写步骤如下:  1.Socket系统调用  为了进行网络I/O,服务器和客户机两 ...

  3. zprofiler三板斧解决cpu占用率过高问题（转载）

    zprofiler三板斧解决cpu占用率过高问题 九居 JVM性能与调试平台   zprofiler   上周五碰到了一个线上机器cpu占用率过高的问题.问题本身比较简单,但是定位过程中动用了多个zp ...

  4. RocketMQ 启动停止命令

    1.rocketmq的启动   进入rocketMQ解压目录下的bin文件夹 启动namesrv服务:nohup sh bin/mqnamesrv &  日志目录:{rocketMQ解压目录} ...

  5. Python学习（一） —— 基础

    一.计算机的组成 计算机硬件主要由cpu.内存.硬盘组成. cpu:相当于人类的大脑,用于计算 内存:临时加载数据或者程序.缺点:断电即消失. 硬盘:用于永久存放数据或者程序.缺点:运行速度慢. 二. ...

  6. sqlldr的用法 (这个最完整)

    转自:http://blog.chinaunix.net/uid-23622436-id-2394093.html 一:在 Oracle 数据库中,我们通常在不同数据库的表间记录进行复制或迁移时会用以 ...

  7. 导入项目报错：Type Java compiler level does not match the version

    1,导入项目报错一般是因为缺少jar包或者是jar包冲突 2,导入的jar包版本问题 3,环境需要重新修改,比如build path 中重新add libararies 遇到这种compiler环境问 ...

  8. union和union all的区别（面试常考）

    Union:对两个结果集进行并集操作,不包括重复行,同时进行默认规则的排序: Union All:对两个结果集进行并集操作,包括重复行,不进行排序: Union因为要进行重复值扫描,所以效率低.如果合 ...

  9. Hudson与Jenkins

    Hudson是Jenkins的前身,它们都是基于Java开发的一种持续集成工具,用于监控程序重复的工作,包括: 1.持续的软件版本发布/测试项目. 2.监控外部调用执行的工作. Hudson的特性 1 ...

  10. 生日蛋糕 POJ - 1190 （搜索+剪枝）

    7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1 <= i <= M)层蛋糕是半径为Ri, 高度为Hi的圆柱.当 ...