利用分页器实现常用的大图、缩略图效果。

墨染锦年

官方案例中，缩略图控制 / 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

66666666楼主大神