因需要一种滑动显示内容，并且带可拖动的进度条，即下面这种效果
找了很多插件，总有地方不能满足需求。于是决定自己手写，下面为完整源码：
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: 100%; 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>