Swiper中文论坛

标题: 利用分页器实现常用的大图、缩略图效果。 [打印本页]
作者: 墨染锦年    时间: 2018-1-29 02:49
标题: 利用分页器实现常用的大图、缩略图效果。
官方案例中，缩略图控制 / Swiper互相控制(300)效果，缩略图是居中的，如果改为居左，切换的时候就会有问题。
而官方案例中另一个效果缩略图控制 / 无限循环(310)则是无限循环的，如果是一张图的话，就显得太多余了。
所以就自己研究简单写了个效果。
最终效果如下：

没有单独分离出来效果页面，这里只把主要代码分享出来，有点基础的需要的拿去用。。

HTML如下：
  1. <div class="propicbig">
  2.                                                 <div class="swiper-container">
  3.                                                         <div class="swiper-wrapper">
  4.                                                                 <div class="swiper-slide"><img src="images/tu7.jpg"><span>BD-2</span></div>
  5.                                                                 <div class="swiper-slide"><img src="images/tu1.jpg"><span>BD-2</span></div>
  6.                                                                 <div class="swiper-slide"><img src="images/tu7.jpg"><span>BD-2</span></div>
  7.                                                                 <div class="swiper-slide"><img src="images/tu10.jpg"><span>BD-2</span></div>
  8.                                                                 <div class="swiper-slide"><img src="images/tu7.jpg"><span>BD-2</span></div>
  9.                                                                 <div class="swiper-slide"><img src="images/tu10.jpg"><span>BD-2</span></div>
  10.                                                                 <div class="swiper-slide"><img src="images/tu7.jpg"><span>BD-2</span></div>
  11.                                                                 <div class="swiper-slide"><img src="images/tu10.jpg"><span>BD-2</span></div>
  12.                                                         </div>
  13.                                                 </div>
  14.                                                 <div class="small"><ul class="pagination"></ul><div class="prev"></div><div class="next"></div></div>
  15.                                         </div>
复制代码
CSS如下：
  1. .view_pro .propicbig {
  2.   overflow: hidden;
  3.   text-align: center;
  4. }
  5. .view_pro .propicbig img {
  6.   max-width: 100%;
  7.   height: auto;
  8. }
  9. .view_pro .propicbig span {
  10.   display: block;
  11.   white-space: nowrap;
  12.   overflow: hidden;
  13.   text-overflow: ellipsis;
  14.   font-size: 16px;
  15.   padding: 10px 0 0 0;
  16. }
  17. .view_pro .small {
  18.   margin: 15px 15% 20px 15%;
  19.   overflow: hidden;
  20.   position: relative;
  21.   padding: 0 40px;
  22. }
  23. .view_pro .small li {
  24.   float: left;
  25.   width: 25%;
  26.   overflow: hidden;
  27.   padding: 0 5px;
  28.   display: none;
  29. }
  30. .view_pro .small li .pic {
  31.   border: 2px solid #fff;
  32.   overflow: hidden;
  33. }
  34. .view_pro .small li .pic img {
  35.   max-width: 100%;
  36.   height: auto;
  37. }
  38. .view_pro .small li.on .pic {
  39.   border: 2px solid #a7464a;
  40. }
  41. .view_pro .small li:nth-child(1),
  42. .view_pro .small li:nth-child(2),
  43. .view_pro .small li:nth-child(3),
  44. .view_pro .small li:nth-child(4) {
  45.   display: block;
  46. }
  47. .view_pro .small .prev,
  48. .view_pro .small .next {
  49.   width: 30px;
  50.   position: absolute;
  51.   top: 0px;
  52.   bottom: 0px;
  53.   background-repeat: no-repeat;
  54.   background-position: center center;
  55. }
  56. .view_pro .small .prev {
  57.   left: 0px;
  58.   background-image: url(../images/icon_lr3.png);
  59. }
  60. .view_pro .small .prev.swiper-button-disabled {
  61.   background-image: url(../images/icon_lr1.png);
  62. }
  63. .view_pro .small .next {
  64.   right: 0px;
  65.   background-image: url(../images/icon_lr4.png);
  66. }
  67. .view_pro .small .next.swiper-button-disabled {
  68.   background-image: url(../images/icon_lr2.png);
  69. }
复制代码
JS如下：
  1.         //propicbig
  2.         var zongpic=$(".propicbig .swiper-slide").length;
  3.         var dqpic=0;
  4.         var propicbig = new Swiper('.propicbig .swiper-container', {
  5.                 slidesPerView: 'auto',
  6.                 autoHeight:true,
  7.                 pagination: {
  8.                         el: '.pagination',
  9.                         clickable: true,
  10.                         bulletClass: 'mm',
  11.                         bulletActiveClass: 'on',
  12.                         renderBullet: function(index, className) {
  13.                                 return '<li class="' + className + '"><div class="pic"><img src="' + $(".swiper-slide").eq(index).find('img').attr("src") + '"/></div></li>';
  14.                         },
  15.                 },
  16.                 navigation: {
  17.                         nextEl: '.next',
  18.                         prevEl: '.prev',
  19.                 },
  20.                 on: {
  21.                         slideChangeTransitionStart: function() {
  22.                                 if(this.activeIndex>=dqpic && this.activeIndex>=3 && this.activeIndex<=zongpic-2){
  23.                                         $(".mm").eq(this.activeIndex-2).prev().hide();
  24.                                         $(".mm").eq(this.activeIndex).next().show();
  25.                                         dqpic=this.activeIndex;
  26.                                 }else if(this.activeIndex<dqpic && this.activeIndex>=1){
  27.                                         $(".mm").eq(this.activeIndex).prev().show();
  28.                                         $(".mm").eq(this.activeIndex+2).next().hide();
  29.                                         dqpic=this.activeIndex;
  30.                                 }
  31.                         },
  32.                 },
  33.         });
复制代码


作者: dazhangyu    时间: 2018-2-26 17:16
66666666楼主大神



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2