手写滑动同步滚动进度条jq插件

因需要一种滑动显示内容,并且带可拖动的进度条,即下面这种效果

找了很多插件,总有地方不能满足需求。于是决定自己手写,下面为完整源码:

swiper.js

复制代码
 1 $.swiperCalculator = function (wrap, drag) {
 2     this.wrap = wrap;
 3     this.drag = drag;
 4     this.dWidth = drag.width();
 5     this.pWidth = drag.parent().width() - drag.width();
 6     this.lWidth = wrap.children().outerWidth(true);
 7     this.wWidth = wrap.parent().width();
 8     this.num = wrap.children().length - 1;
 9 }
10 $.extend($.swiperCalculator.prototype, {
11     setPostion: function (wrapX, dragX) {
12         this.wrap.css('transform', 'translate3d(' + wrapX + 'px, 0px, 0px)');
13         if (dragX < 0) dragX = 0;
14         if (dragX > this.pWidth) dragX = this.pWidth;
15         this.drag.css('left', dragX + 'px');
16         this.drag.parent().siblings('.pro-val').html(parseInt(dragX / this.pWidth * 100) + '%');
17         this.drag.siblings('.pro-bar').css('width', (dragX + this.dWidth) + 'px');
18     },
19     initPostion: function (i) {
20         let wrapX, dragX;
21         dragX = i * this.pWidth / this.num;
22         if (i == 0) wrapX = 0;
23         else if (i == this.num) wrapX = this.wWidth - (this.num + 1) * this.lWidth - 15;
24         else wrapX = dragX - i * this.lWidth - 5;
25         this.wrap.css('transition-duration', '0.3s').children('li').removeClass('active').eq(i).addClass('active');
26         this.drag.css('transition-duration', '0.3s');
27 
28         this.setPostion(wrapX, dragX);
29     }
30 });
31 
32 let $element, posX, isTouched = false;
33 
34 $.fn.extend({
35     swiper: function () {
36         let $wrap = $(this).find('.wrapper ul');
37         let $li = $wrap.children('li');
38         $wrap.css('width', ($li.length + 1) * $li.outerWidth(true) + 'px').mousedown(function (e) {
39             isTouched = true;
40             if (e.preventDefault) e.preventDefault();
41             else e.returnValue = false;
42 
43             posX = e.pageX;
44             $element = $(this);
45         });
46         $(this).find('.drag').mousedown(function (e) {
47             isTouched = true;
48             if (e.preventDefault) e.preventDefault();
49             else e.returnValue = false;
50 
51             posX = e.pageX;
52             $element = $(this);
53         })
54         return $(this);
55     },
56     mouseMove: function (x) {
57         let $p = $(this).closest('.swiper')
58         let $wrap = $p.find('.wrapper ul');
59         let $drag = $p.find('.drag');
60 
61         let sc = new $.swiperCalculator($wrap, $drag);
62         let num = sc.num + 1;
63         let dragX = $drag.position().left;
64         if (x == 0) {
65             let i = Math.round(dragX / sc.pWidth * (num - 1));
66             sc.initPostion(i);
67         } else {
68             let wrapX;
69             if ($(this).is($drag)) {
70                 wrapX = -1 * x / sc.pWidth * num * sc.lWidth;
71             } else {
72                 wrapX = x;
73                 x = wrapX / (num * sc.lWidth) * -sc.pWidth;
74             }
75             wrapX += parseFloat($wrap.css("transform").match(/matrix\(([^)]+)\)/)[1].split(", ")[4]);
76             dragX += x;
77 
78             $wrap.css('transition-duration', '0s');
79             $drag.css('transition-duration', '0s');
80             sc.setPostion(wrapX, dragX);
81         }
82     }
83 })
84 
85 $(document).mousemove(function (e) {
86     if (!isTouched) return;
87     if (e.preventDefault) e.preventDefault();
88     else e.returnValue = false;
89 
90     $element.mouseMove(e.pageX - posX)
91     posX = e.pageX;
92 }).mouseup(function (e) {
93     if (!isTouched) return;
94     isTouched = false;
95 
96     $element.mouseMove(0);
97 });

test.html

复制代码
 1 <!DOCTYPE html
 2     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 
 5 <head>
 6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7     <title>XXX</title>
 8     <style>
 9         .wrapper{width: 885px; overflow: hidden;background: #fff; padding: 10px 0;}
10         .wrapper ul{transform: translate3d(0px, 0px, 0px);}
11         .wrapper li{float: left; width: 120px; height: 121px; margin: 5px; padding: 10px; text-align: center; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 2px 3px rgba(0,0,0,.1);;border-radius: 6px;}
12         .wrapper li.active{box-shadow:0 0 0 1px rgba(0,0,0,.05),0 2px 4px 5px rgba(0,0,0,.14);}
13         .wrapper li.end{line-height: 120px;}
14         .wrapper li img{width: 100px; height: 100px;}
15         .progress{position: relative;float: left;width: 755px;height: 10px; margin: 10px 0; border-radius: 4px; background-color: #e6e7e9;}
16         .pro-bar{height: 10px;background-color: #2fb344;border-radius: 4px;}
17         .drag{position: absolute; top:-10px;left:0;}
18         .txt{float: left;font-size: 16px; color: #f76707; line-height: 30px; margin-left: 10px;}
19         .pro-txt{width: 45px;}
20     </style>
21 </head>
22 
23 <body>
24     <div class="swiper">
25         <div class="wrapper">
26             <ul>
27                 <li>
28                     <img src="xxxx.jpg">
29                     <p>第1张图</p>
30                 </li>
31                 <li>
32                     <img src="xxxx.jpg">
33                     <p>第2张图</p>
34                 </li>
35                 <li>
36                     <img src="xxxx.jpg">
37                     <p>第3张图</p>
38                 </li>
39                 <li>
40                     <img src="xxxx.jpg">
41                     <p>第4张图</p>
42                 </li>
43                 。
44                 。
45                 。
46                 <li class="end">END</li>
47             </ul>
48         </div>
49         <div>
50             <div class="txt pro-txt">进度</div>
51             <div class="progress">
52                 <div class="pro-bar"></div>
53                 <div class="drag"><img src="yyyy.png"></div>
54             </div>
55             <div class="txt pro-val"></div>
56         </div>
57     </div>
58 
59     <script type="text/javascript" src="/js/jquery18.js" charset="utf-8"></script>
60     <script type='text/javascript' src='/js/swiper.js'></script>
61     <script type="text/javascript">
62         $('.swiper').swiper();
63         //默认选中第4幅图,也可不用
64         let sc = new $.swiperCalculator($('.wrapper ul'), $('.drag'));
65         sc.initPostion(3);
66     </script>
67 </body>
68 
69 </html>