手写滑动同步滚动进度条jq插件
因需要一种滑动显示内容，并且带可拖动的进度条，即下面这种效果
找了很多插件，总有地方不能满足需求。于是决定自己手写，下面为完整源码：
swiper.js
1 $.swiperCalculator = function (wrap, drag) { 2 this.wrap = wrap; 3 this.drag = drag; 4 this.pWidth = drag.parent().width() - drag.width(); 5 this.num = wrap.children().length - 1; 6 } 7 $.extend($.swiperCalculator.prototype, { 8 setPostion: function (wrapX, dragX) { 9 this.wrap.css('transform', 'translate3d(' + wrapX + 'px, 0px, 0px)'); 10 if (dragX < 0) dragX = 0; 11 if (dragX > this.pWidth) dragX = this.pWidth; 12 this.drag.css('left', dragX + 'px'); 13 this.drag.parent().siblings('.pro-val').html(parseInt(dragX / this.pWidth * 100) + '%'); 14 this.drag.siblings('.pro-bar').css('width', (dragX + this.drag.width()) + 'px'); 15 }, 16 initPostion: function (i) { 17 let wrapX, dragX; 18 dragX = i * this.pWidth / this.num; 19 let lWidth = this.wrap.children().outerWidth(true); 20 if (i == 0) wrapX = 0; 21 else if (i == this.num) wrapX = this.wrap.parent().width() - (this.num + 1) * lWidth - 15; 22 else wrapX = dragX - i * lWidth - 5; 23 this.wrap.css('transition-duration', '0.3s').children('li').removeClass('active').eq(i).addClass('active'); 24 this.drag.css('transition-duration', '0.3s'); 25 26 this.setPostion(wrapX, dragX); 27 } 28 }); 29 30 let $element, posX, isTouched = false; 31 32 $.fn.extend({ 33 swiper: function () { 34 let $wrap = $(this).find('.wrapper ul'); 35 let $li = $wrap.children('li'); 36 $wrap.css('width', ($li.length + 1) * $li.outerWidth(true) + 'px').mousedown(function (e) { 37 isTouched = true; 38 if (e.preventDefault) e.preventDefault(); 39 else e.returnValue = false; 40 41 posX = e.pageX; 42 $element = $(this); 43 }); 44 $(this).find('.drag').mousedown(function (e) { 45 isTouched = true; 46 if (e.preventDefault) e.preventDefault(); 47 else e.returnValue = false; 48 49 posX = e.pageX; 50 $element = $(this); 51 }) 52 return $(this); 53 }, 54 mouseMove: function (x) { 55 let $p = $(this).closest('.swiper') 56 let $wrap = $p.find('.wrapper ul'); 57 let $drag = $p.find('.drag'); 58 59 let sc = new $.swiperCalculator($wrap, $drag); 60 let dragX = $drag.position().left; 61 if (x == 0) { 62 let i = Math.round(dragX / sc.pWidth * sc.num); 63 sc.initPostion(i); 64 } else { 65 let wrapX; 66 let wWidth = $wrap.width(); 67 if ($(this).is($drag)) { 68 wrapX = -1 * x / sc.pWidth * wWidth; 69 } else { 70 wrapX = x; 71 x = -1 * wrapX / wWidth * sc.pWidth; 72 } 73 wrapX += parseFloat($wrap.css("transform").match(/matrix\(([^)]+)\)/)[1].split(", ")[4]); 74 dragX += x; 75 76 $wrap.css('transition-duration', '0s'); 77 $drag.css('transition-duration', '0s'); 78 sc.setPostion(wrapX, dragX); 79 } 80 } 81 }) 82 83 $(document).mousemove(function (e) { 84 if (!isTouched) return; 85 if (e.preventDefault) e.preventDefault(); 86 else e.returnValue = false; 87 88 $element.mouseMove(e.pageX - posX) 89 posX = e.pageX; 90 }).mouseup(function (e) { 91 if (!isTouched) return; 92 isTouched = false; 93 94 $element.mouseMove(0); 95 });
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 *{margin: 0;padding: 0;} 10 .wrapper{width: 885px; overflow: hidden;background: #fff; padding: 10px 0;} 11 .wrapper ul{transform: translate3d(0px, 0px, 0px);} 12 .wrapper li{list-style: none;float: left; width: 120px; height: 125px; 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;} 13 .wrapper li.active{box-shadow:0 0 0 1px rgba(0,0,0,.05),0 2px 4px 5px rgba(0,0,0,.14);} 14 .wrapper li.end{line-height: 120px;} 15 .wrapper li img{width: 100px; height: 100px;} 16 .progress{position: relative;float: left;width: 755px;height: 10px; margin: 10px 0; border-radius: 4px; background-color: #e6e7e9;} 17 .pro-bar{width: 30px;height: 10px;background-color: #2fb344;border-radius: 4px;} 18 .drag{position: absolute; top:-10px;left:0;} 19 .txt{float: left;font-size: 16px; color: #f76707; line-height: 30px; margin-left: 10px;} 20 .pro-txt{width: 45px;} 21 </style> 22 </head> 23 24 <body> 25 <div class="swiper"> 26 <div class="wrapper"> 27 <ul> 28 <li class="active"> 29 <img src="xxxx.jpg"> 30 <p>第1张图</p> 31 </li> 32 <li> 33 <img src="xxxx.jpg"> 34 <p>第2张图</p> 35 </li> 36 <li> 37 <img src="xxxx.jpg"> 38 <p>第3张图</p> 39 </li> 40 <li> 41 <img src="xxxx.jpg"> 42 <p>第4张图</p> 43 </li> 44 <li> 45 <img src="xxxx.jpg"> 46 <p>第4张图</p> 47 </li><li> 48 <img src="xxxx.jpg"> 49 <p>第4张图</p> 50 </li><li> 51 <img src="xxxx.jpg"> 52 <p>第4张图</p> 53 </li> 54 <li class="end">END</li> 55 </ul> 56 </div> 57 <div> 58 <div class="txt pro-txt">进度</div> 59 <div class="progress"> 60 <div class="pro-bar"></div> 61 <div class="drag"><img src="yyyy.png"></div> 62 </div> 63 <div class="txt pro-val">0%</div> 64 </div> 65 </div> 66 67 <script type="text/javascript" src="/js/jquery18.js" charset="utf-8"></script> 68 <script type='text/javascript' src='/js/swiper.js'></script> 69 <script type="text/javascript"> 70 $('.swiper').swiper(); 71 //默认选中第4幅图，也可不用 72 let sc = new $.swiperCalculator($('.wrapper ul'), $('.drag')); 73 sc.initPostion(3); 74 </script> 75 </body> 76 77 </html>
