bscroll制作轮播图，jq和vue两种方式，带下边的点点

1.vue方式

1.1代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title></title><style type="text/css">* { margin: 0; padding: 0; }  .clearfix:before, .clearfix:after { content: '.'; display: block; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; }  .clearfix:after { clear: both; }  .clearfix { zoom: 1; }  .slider { position: relative; width: 100%; overflow: hidden; }  .slider-group { min-height: 1px; }  .slider-item { float: left; box-sizing: border-box; overflow: hidden; text-align: center; }  .slider-item a { display: block; width: 100%; overflow: hidden; text-decoration: none; }  .slider-item a img { display: block; width: 100%; }  .slider .dots { position: absolute; right: 0; left: 0; bottom: 12px; text-align: center; font-size: 0; }  .slider .dots .dot { display: inline-block; margin: 0 4px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); }  .slider .dots .active { width: 20px; border-radius: 5px; background: rgba(255, 255, 255, 0.8); }</style>
</head><body><div id="app"><div v-if="recommends.length" class="slider" ref="slider"><div class="slider-group clearfix" ref="sliderGroup"><div class="slider-item" v-for="item in recommends"><a href="javascript:;"><img :src="item" /></a></div></div><div class="dots"><span class="dot" v-for="(item, index) in dots" :class="{ active: currentPageIndex === index }"></span></div></div></div><script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script><!-- 注意 bscroll 的版本，版本不同使用的方法不太一样 --><script src="bscroll.min.js" type="text/javascript" charset="utf-8"></script><script>var app = new Vue({el: "#app",data: {// 轮播图数据recommends: ["http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg","http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/1.jpg","http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"],// 下边的小点dots: [],// 当前是第几页currentPageIndex: 0,// 是否循环loop: true,// 是否自动播放autoPlay: true,// 自动轮播的切换时间interval: 1500},created() {setTimeout(() => {this._setSliderWidth();// 点的初始化须在轮播图初始化之前，否则会多出两个点this._initDots();this._initSlider();if (this.autoPlay) {this._play();}}, 20);// 监听页面 窗口大小变化window.addEventListener('resize', () => {// 若没初始化，直接returnif (!this.slider) {return}// 若初始化了，重新计算窗口尺寸，并调用刷新的api方法this._setSliderWidth(true)this.slider.refresh()})},methods: {_setSliderWidth(isResize) {// 获取有轮播的个数this.children = this.$refs.sliderGroup.children;let width = 0;let sliderWidth = this.$refs.slider.clientWidth;// 设置单个轮播图的宽度for (let i = 0; i < this.children.length; i++) {let child = this.children[i];child.style.width = sliderWidth + "px";width += sliderWidth;}// 如果 为循环模式，则前后各加一个，总容器宽度须加两个轮播图宽度if (this.loop && !isResize) {width += sliderWidth * 2;}// 计算容器宽度this.$refs.sliderGroup.style.width = width + "px";},_initDots() {// 初始化点的个数this.dots = new Array(this.children.length);},_initSlider() {// 通过 bscroll 初始化方法初始化轮播图// 不同版本初始化方法不同，详情见官方网站this.slider = new BScroll(this.$refs.slider, {scrollX: true,scrollY: false,momentum: false,snap: true,snapLoop: this.loop,snapThreshold: 0.3,snapSpeed: 400});// 滚动结束事件 scrollEnd this.slider.on("scrollEnd", () => {// 滚动到第几页let pageIndex = this.slider.getCurrentPage().pageX;// 如果是循环状态，须减1if (this.loop) {pageIndex -= 1;}this.currentPageIndex = pageIndex;// 如果自动轮播，先清除计时器，再执行播放命令if (this.autoPlay) {clearTimeout(this.timer)this._play()}});},_play() {let pageIndex = this.currentPageIndex + 1;if (this.loop) {pageIndex += 1;}this.timer = setTimeout(() => {this.slider.goToPage(pageIndex, 0, 400);}, this.interval);}}})</script>
</body></html>

1.2 效果

2.jq 方式

2.1代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title></title><style type="text/css">* { margin: 0; padding: 0; }  .clearfix:before, .clearfix:after { content: '.'; display: block; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; }  .clearfix:after { clear: both; }  .clearfix { zoom: 1; }  .slider { position: relative; width: 100%; overflow: hidden; }  .slider-group { min-height: 1px; width: 1875px; }  .slider-item { float: left; box-sizing: border-box; overflow: hidden; text-align: center; width: 375px; }  .slider-item a { display: block; width: 100%; overflow: hidden; text-decoration: none; }  .slider-item a img { display: block; width: 100%; }  .slider .dots { position: absolute; right: 0; left: 0; bottom: 12px; text-align: center; font-size: 0; }  .slider .dots .dot { display: inline-block; margin: 0 4px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); }  .slider .dots .active { width: 20px; border-radius: 5px; background: rgba(255, 255, 255, 0.8); }</style>
</head>
<body><div class="slider"><div class="slider-group clearfix"><div class="slider-item"><a href="javascript:;"><img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg" /></a></div><div class="slider-item"><a href="javascript:;"><img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/1.jpg" /></a></div><div class="slider-item"><a href="javascript:;"><img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg" /></a></div></div><div class="dots"><span class="dot active"></span><span class="dot"></span><span class="dot"></span></div></div><script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="bscroll.min.js" type="text/javascript" charset="utf-8"></script><script>// 当前页var currentPageIndex = 0;// 是否自动轮播var autoPlay = true;// 自动轮播需要的计时器var timer = null;// 初始化 bscroll 需要的配置，不同版本初始化配置不同var config = {scrollX: true,scrollY: false,momentum: false,snap: true,snapLoop: true,snapThreshold: 0.3,snapSpeed: 400}// 初始化 bscrollvar slider = $('.slider')[0];var scroll = new BScroll(slider, config);// 如果是自动轮播，则需要执行轮播if(autoPlay){_play()}// 滚动结束时的动作scroll.on("scrollEnd", function () {// 滚动到第几页var pageIndex = scroll.getCurrentPage().pageX;// 如果是循环状态，须减1if (config.snapLoop) {pageIndex -= 1;}currentPageIndex = pageIndex;// 如果自动轮播，先清除计时器，再执行播放命令if (autoPlay) {clearTimeout(timer)_play()}$(".dots").find(".dot").eq(currentPageIndex).addClass("active").siblings().removeClass("active");});// 播放function _play() {let pageIndex = currentPageIndex + 1;if (config.snapLoop) {pageIndex += 1;}timer = setTimeout(() => {scroll.goToPage(pageIndex, 0, 400);}, 1500);}</script>
</body>
</html>

2.2 效果

3.说明

3.1 须要引入对应版本的 bscroll.min.js

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.BScroll=e():t.BScroll=e()}(this,function(){return function(t){function e(s){if(i[s])return i[s].exports;var n=i[s]={exports:{},id:s,loaded:!1};return t[s].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){"use strict";var s=i(1);s.BScroll.Version="0.1.15",t.exports=s.BScroll},function(t,e,i){"use strict";function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0}),e.BScroll=void 0;var r=function(){function t(t,e){for(var i=0;i<e.length;i++){var s=e[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}return function(e,i,s){return i&&t(e.prototype,i),s&&t(e,s),e}}(),a=i(2),h=1;e.BScroll=function(t){function e(t,i){s(this,e);var o=n(this,Object.getPrototypeOf(e).call(this));return o.wrapper="string"==typeof t?document.querySelector(t):t,o.scroller=o.wrapper.children[0],o.scrollerStyle=o.scroller.style,o.options={startX:0,startY:0,scrollY:!0,directionLockThreshold:5,momentum:!0,bounce:!0,selectedIndex:0,rotate:25,wheel:!1,snap:!1,snapLoop:!1,snapThreshold:.1,swipeTime:2500,bounceTime:700,adjustTime:400,swipeBounceTime:1200,deceleration:.001,momentumLimitTime:300,momentumLimitDistance:15,resizePolling:60,preventDefault:!0,preventDefaultException:{tagName:/^(INPUT|TEXTAREA|BUTTON|SELECT)$/},HWCompositing:!0,useTransition:!0,useTransform:!0},(0,a.extend)(o.options,i),o.translateZ=o.options.HWCompositing&&a.hasPerspective?" translateZ(0)":"",o.options.useTransition=o.options.useTransition&&a.hasTransition,o.options.useTransform=o.options.useTransform&&a.hasTransform,o.options.eventPassthrough=o.options.eventPassthrough===!0?"vertical":o.options.eventPassthrough,o.options.preventDefault=!o.options.eventPassthrough&&o.options.preventDefault,o.options.scrollX="horizontal"!==o.options.eventPassthrough&&o.options.scrollX,o.options.scrollY="vertical"!==o.options.eventPassthrough&&o.options.scrollY,o.options.freeScroll=o.options.freeScroll&&!o.options.eventPassthrough,o.options.directionLockThreshold=o.options.eventPassthrough?0:o.options.directionLockThreshold,o.options.tap===!0&&(o.options.tap="tap"),o._init(),o.options.snap&&o._initSnap(),o.refresh(),o.options.snap||o.scrollTo(o.options.startX,o.options.startY),o.enable(),o}return o(e,t),r(e,[{key:"_init",value:function(){this.x=0,this.y=0,this.directionX=0,this.directionY=0,this._addEvents()}},{key:"_initSnap",value:function(){var t=this;if(this.currentPage={},this.options.snapLoop){var e=this.scroller.children;e.length>0&&((0,a.prepend)(e[e.length-1].cloneNode(!0),this.scroller),this.scroller.appendChild(e[1].cloneNode(!0)))}"string"==typeof this.options.snap&&(this.options.snap=this.scroller.querySelectorAll(this.options.snap)),this.on("refresh",function(){if(t.pages=[],t.wrapperWidth&&t.wrapperHeight&&t.scrollerWidth&&t.scrollerHeight){var e=t.options.snapStepX||t.wrapperWidth,i=t.options.snapStepY||t.wrapperHeight,s=0,n=void 0,o=void 0,r=void 0,h=0,l=void 0,c=0,u=void 0,p=void 0,d=void 0;if(t.options.snap===!0)for(o=Math.round(e/2),r=Math.round(i/2);s>-t.scrollerWidth;){for(t.pages[h]=[],l=0,n=0;n>-t.scrollerHeight;)t.pages[h][l]={x:Math.max(s,t.maxScrollX),y:Math.max(n,t.maxScrollY),width:e,height:i,cx:s-o,cy:n-r},n-=i,l++;s-=e,h++}else for(p=t.options.snap,l=p.length,u=-1;h<l;h++)d=(0,a.getRect)(p[h]),(0===h||d.left<=(0,a.getRect)(p[h-1]).left)&&(c=0,u++),t.pages[c]||(t.pages[c]=[]),s=Math.max(-d.left,t.maxScrollX),n=Math.max(-d.top,t.maxScrollY),o=s-Math.round(d.width/2),r=n-Math.round(d.height/2),t.pages[c][u]={x:s,y:n,width:d.width,height:d.height,cx:o,cy:r},s>t.maxScrollX&&c++;var f=t.options.snapLoop?1:0;t.goToPage(t.currentPage.pageX||f,t.currentPage.pageY||0,0),t.options.snapThreshold%1===0?(t.snapThresholdX=t.options.snapThreshold,t.snapThresholdY=t.options.snapThreshold):(t.snapThresholdX=Math.round(t.pages[t.currentPage.pageX][t.currentPage.pageY].width*t.options.snapThreshold),t.snapThresholdY=Math.round(t.pages[t.currentPage.pageX][t.currentPage.pageY].height*t.options.snapThreshold))}}),this.on("scrollEnd",function(){t.options.snapLoop&&(0===t.currentPage.pageX&&t.goToPage(t.pages.length-2,t.currentPage.pageY,0),t.currentPage.pageX===t.pages.length-1&&t.goToPage(1,t.currentPage.pageY,0))}),this.on("flick",function(){var e=t.options.snapSpeed||Math.max(Math.max(Math.min(Math.abs(t.x-t.startX),1e3),Math.min(Math.abs(t.y-t.startY),1e3)),300);t.goToPage(t.currentPage.pageX+t.directionX,t.currentPage.pageY+t.directionY,e)})}},{key:"_nearestSnap",value:function(t,e){if(!this.pages.length)return{x:0,y:0,pageX:0,pageY:0};var i=0;if(Math.abs(t-this.absStartX)<this.snapThresholdX&&Math.abs(e-this.absStartY)<this.snapThresholdY)return this.currentPage;t>0?t=0:t<this.maxScrollX&&(t=this.maxScrollX),e>0?e=0:e<this.maxScrollY&&(e=this.maxScrollY);for(var s=this.pages.length;i<s;i++)if(t>=this.pages[i][0].cx){t=this.pages[i][0].x;break}s=this.pages[i].length;for(var n=0;n<s;n++)if(e>=this.pages[0][n].cy){e=this.pages[0][n].y;break}return i===this.currentPage.pageX&&(i+=this.directionX,i<0?i=0:i>=this.pages.length&&(i=this.pages.length-1),t=this.pages[i][0].x),n===this.currentPage.pageY&&(n+=this.directionY,n<0?n=0:n>=this.pages[0].length&&(n=this.pages[0].length-1),e=this.pages[0][n].y),{x:t,y:e,pageX:i,pageY:n}}},{key:"_addEvents",value:function(){var t=a.addEvent;this._handleEvents(t)}},{key:"_removeEvents",value:function(){var t=a.removeEvent;this._handleEvents(t)}},{key:"_handleEvents",value:function(t){var e=this.options.bindToWrapper?this.wrapper:window;t(window,"orientationchange",this),t(window,"resize",this),this.options.click&&t(this.wrapper,"click",this),this.options.disableMouse||(t(this.wrapper,"mousedown",this),t(e,"mousemove",this),t(e,"mousecancel",this),t(e,"mouseup",this)),a.hasTouch&&!this.options.disableTouch&&(t(this.wrapper,"touchstart",this),t(e,"touchmove",this),t(e,"touchcancel",this),t(e,"touchend",this)),t(this.scroller,a.style.transitionEnd,this)}},{key:"_start",value:function(t){var e=a.eventType[t.type];if((e===h||0===t.button)&&!(!this.enabled||this.destroyed||this.initiated&&this.initiated!==e)){if(this.initiated=e,!this.options.preventDefault||a.isBadAndroid||(0,a.preventDefaultException)(t.target,this.options.preventDefaultException)||t.preventDefault(),this.moved=!1,this.distX=0,this.distY=0,this.directionX=0,this.directionY=0,this.directionLocked=0,this._transitionTime(),this.startTime=+new Date,this.options.wheel&&(this.target=t.target),this.options.useTransition&&this.isInTransition){this.isInTransition=!1;var i=this.getComputedPosition();this._translate(i.x,i.y),this.options.wheel?this.target=this.items[Math.round(-i.y/this.itemHeight)]:this.trigger("scrollEnd")}var s=t.touches?t.touches[0]:t;this.startX=this.x,this.startY=this.y,this.absStartX=this.x,this.absStartY=this.y,this.pointX=s.pageX,this.pointY=s.pageY,this.trigger("beforeScrollStart")}}},{key:"_move",value:function(t){if(this.enabled&&!this.destroyed&&a.eventType[t.type]===this.initiated){this.options.preventDefault&&t.preventDefault();var e=t.touches?t.touches[0]:t,i=e.pageX-this.pointX,s=e.pageY-this.pointY;this.pointX=e.pageX,this.pointY=e.pageY,this.distX+=i,this.distY+=s;var n=Math.abs(this.distX),o=Math.abs(this.distY),r=+new Date;if(!(r-this.endTime>this.options.momentumLimitTime&&o<this.options.momentumLimitDistance&&n<this.options.momentumLimitDistance)){if(this.directionLocked||this.options.freeScroll||(n>o+this.options.directionLockThreshold?this.directionLocked="h":o>=n+this.options.directionLockThreshold?this.directionLocked="v":this.directionLocked="n"),"h"===this.directionLocked){if("vertical"===this.options.eventPassthrough)t.preventDefault();else if("horizontal"===this.options.eventPassthrough)return void(this.initiated=!1);s=0}else if("v"===this.directionLocked){if("horizontal"===this.options.eventPassthrough)t.preventDefault();else if("vertical"===this.options.eventPassthrough)return void(this.initiated=!1);i=0}i=this.hasHorizontalScroll?i:0,s=this.hasVerticalScroll?s:0;var h=this.x+i,l=this.y+s;(h>0||h<this.maxScrollX)&&(h=this.options.bounce?this.x+i/3:h>0?0:this.maxScrollX),(l>0||l<this.maxScrollY)&&(l=this.options.bounce?this.y+s/3:l>0?0:this.maxScrollY),this.directionX=i>0?-1:i<0?1:0,this.directionY=s>0?-1:s<0?1:0,this.moved||(this.moved=!0,this.trigger("scrollStart")),this._translate(h,l),r-this.startTime>this.options.momentumLimitTime&&(this.startTime=r,this.startX=this.x,this.startY=this.y,1===this.options.probeType&&this.trigger("scroll",{x:this.x,y:this.y})),this.options.probeType>1&&this.trigger("scroll",{x:this.x,y:this.y});var c=document.documentElement.scrollLeft||window.pageXOffset||document.body.scrollLeft,u=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop,p=this.pointX-c,d=this.pointY-u;(p>document.documentElement.clientWidth-this.options.momentumLimitDistance||p<this.options.momentumLimitDistance||d<this.options.momentumLimitDistance||d>document.documentElement.clientHeight-this.options.momentumLimitDistance)&&this._end(t)}}}},{key:"_end",value:function(t){if(this.enabled&&!this.destroyed&&a.eventType[t.type]===this.initiated&&(this.initiated=!1,this.options.preventDefault&&!(0,a.preventDefaultException)(t.target,this.options.preventDefaultException)&&t.preventDefault(),this.trigger("touchend",{x:this.x,y:this.y}),!this.resetPosition(this.options.bounceTime,a.ease.bounce))){this.isInTransition=!1;var e=Math.round(this.x),i=Math.round(this.y);if(!this.moved){if(this.options.wheel){if(this.target&&"wheel-scroll"===this.target.className){var s=Math.abs(Math.round(i/this.itemHeight)),n=Math.round((this.pointY+(0,a.offset)(this.target).top-this.itemHeight/2)/this.itemHeight);this.target=this.items[s+n]}this.scrollToElement(this.target,this.options.adjustTime,!0,!0,a.ease.swipe)}else this.options.tap&&(0,a.tap)(t,this.options.tap),this.options.click&&(0,a.click)(t);return void this.trigger("scrollCancel")}this.scrollTo(e,i),this.endTime=+new Date;var o=this.endTime-this.startTime,r=Math.abs(e-this.startX),h=Math.abs(i-this.startY);if(this._events.flick&&o<this.options.momentumLimitTime&&r<this.options.momentumLimitDistance&&h<this.options.momentumLimitDistance)return void this.trigger("flick");var l=0;if(this.options.momentum&&o<this.options.momentumLimitTime&&(h>this.options.momentumLimitDistance||r>this.options.momentumLimitDistance)){var c=this.hasHorizontalScroll?(0,a.momentum)(this.x,this.startX,o,this.maxScrollX,this.options.bounce?this.wrapperWidth:0,this.options):{destination:e,duration:0},u=this.hasVerticalScroll?(0,a.momentum)(this.y,this.startY,o,this.maxScrollY,this.options.bounce?this.wrapperHeight:0,this.options):{destination:i,duration:0};e=c.destination,i=u.destination,l=Math.max(c.duration,u.duration),this.isInTransition=1}else this.options.wheel&&(i=Math.round(i/this.itemHeight)*this.itemHeight,l=this.options.adjustTime);var p=a.ease.swipe;if(this.options.snap){var d=this._nearestSnap(e,i);this.currentPage=d,l=this.options.snapSpeed||Math.max(Math.max(Math.min(Math.abs(e-d.x),1e3),Math.min(Math.abs(i-d.y),1e3)),300),e=d.x,i=d.y,this.directionX=0,this.directionY=0,p=a.ease.bounce}if(e!==this.x||i!==this.y)return(e>0||e<this.maxScrollX||i>0||i<this.maxScrollY)&&(p=a.ease.swipeBounce),void this.scrollTo(e,i,l,p);this.options.wheel&&(this.selectedIndex=0|Math.abs(this.y/this.itemHeight)),this.trigger("scrollEnd")}}},{key:"_resize",value:function(){var t=this;this.enabled&&(clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout(function(){t.refresh()},this.options.resizePolling))}},{key:"_startProbe",value:function(){function t(){var i=e.getComputedPosition();e.trigger("scroll",i),e.isInTransition&&(e.probeTimer=(0,a.requestAnimationFrame)(t))}(0,a.cancelAnimationFrame)(this.probeTimer),this.probeTimer=(0,a.requestAnimationFrame)(t);var e=this}},{key:"_transitionTime",value:function(){var t=this,e=arguments.length<=0||void 0===arguments[0]?0:arguments[0];if(this.scrollerStyle[a.style.transitionDuration]=e+"ms",this.options.wheel&&!a.isBadAndroid)for(var i=0;i<this.items.length;i++)this.items[i].style[a.style.transitionDuration]=e+"ms";!e&&a.isBadAndroid&&(this.scrollerStyle[a.style.transitionDuration]="0.001s",(0,a.requestAnimationFrame)(function(){"0.0001ms"===t.scrollerStyle[a.style.transitionDuration]&&(t.scrollerStyle[a.style.transitionDuration]="0s")}))}},{key:"_transitionTimingFunction",value:function(t){if(this.scrollerStyle[a.style.transitionTimingFunction]=t,this.options.wheel&&!a.isBadAndroid)for(var e=0;e<this.items.length;e++)this.items[e].style[a.style.transitionTimingFunction]=t}},{key:"_transitionEnd",value:function(t){t.target===this.scroller&&this.isInTransition&&(this._transitionTime(),this.resetPosition(this.options.bounceTime,a.ease.bounce)||(this.isInTransition=!1,this.trigger("scrollEnd")))}},{key:"_translate",value:function(t,e){if(this.options.useTransform?this.scrollerStyle[a.style.transform]="translate("+t+"px,"+e+"px)"+this.translateZ:(t=Math.round(t),e=Math.round(e),this.scrollerStyle.left=t+"px",this.scrollerStyle.top=e+"px"),this.options.wheel&&!a.isBadAndroid)for(var i=0;i<this.items.length;i++){var s=this.options.rotate*(e/this.itemHeight+i);this.items[i].style[a.style.transform]="rotateX("+s+"deg)"}this.x=t,this.y=e}},{key:"enable",value:function(){this.enabled=!0}},{key:"disable",value:function(){this.enabled=!1}},{key:"refresh",value:function(){this.wrapper.offsetHeight;this.wrapperWidth=parseInt(this.wrapper.style.width)||this.wrapper.clientWidth,this.wrapperHeight=parseInt(this.wrapper.style.height)||this.wrapper.clientHeight,this.scrollerWidth=parseInt(this.scroller.style.width)||this.scroller.clientWidth,this.scrollerHeight=parseInt(this.scroller.style.height)||this.scroller.clientHeight,this.options.wheel?(this.items=this.scroller.children,this.options.itemHeight=this.itemHeight=this.items.length?this.items[0].clientHeight:0,void 0===this.selectedIndex&&(this.selectedIndex=this.options.selectedIndex),this.options.startY=-this.selectedIndex*this.itemHeight,this.maxScrollX=0,this.maxScrollY=-this.itemHeight*(this.items.length-1)):(this.maxScrollX=this.wrapperWidth-this.scrollerWidth,this.maxScrollY=this.wrapperHeight-this.scrollerHeight),this.hasHorizontalScroll=this.options.scrollX&&this.maxScrollX<0,this.hasVerticalScroll=this.options.scrollY&&this.maxScrollY<0,this.hasHorizontalScroll||(this.maxScrollX=0,this.scrollerWidth=this.wrapperWidth),this.hasVerticalScroll||(this.maxScrollY=0,this.scrollerHeight=this.wrapperHeight),this.endTime=0,this.directionX=0,this.directionY=0,this.wrapperOffset=(0,a.offset)(this.wrapper),this.trigger("refresh"),this.resetPosition()}},{key:"resetPosition",value:function(){var t=arguments.length<=0||void 0===arguments[0]?0:arguments[0],e=arguments.length<=1||void 0===arguments[1]?a.ease.bounce:arguments[1],i=this.x;!this.hasHorizontalScroll||i>0?i=0:i<this.maxScrollX&&(i=this.maxScrollX);var s=this.y;return!this.hasVerticalScroll||s>0?s=0:s<this.maxScrollY&&(s=this.maxScrollY),(i!==this.x||s!==this.y)&&(this.scrollTo(i,s,t,e),!0)}},{key:"wheelTo",value:function(t){this.options.wheel&&(this.y=-t*this.itemHeight,this.scrollTo(0,this.y))}},{key:"scrollBy",value:function(t,e){var i=arguments.length<=2||void 0===arguments[2]?0:arguments[2],s=arguments.length<=3||void 0===arguments[3]?a.ease.bounce:arguments[3];t=this.x+t,e=this.y+e,this.scrollTo(t,e,i,s)}},{key:"scrollTo",value:function(t,e,i){var s=arguments.length<=3||void 0===arguments[3]?a.ease.bounce:arguments[3];this.isInTransition=this.options.useTransition&&i>0&&(t!==this.x||e!==this.y),i&&!this.options.useTransition||(this._transitionTimingFunction(s.style),this._transitionTime(i),this._translate(t,e),i&&3===this.options.probeType&&this._startProbe(),this.options.wheel&&(e>0?this.selectedIndex=0:e<this.maxScrollY?this.selectedIndex=this.items.length-1:this.selectedIndex=0|Math.abs(e/this.itemHeight)))}},{key:"getSelectedIndex",value:function(){return this.options.wheel&&this.selectedIndex}},{key:"getCurrentPage",value:function(){return this.options.snap&&this.currentPage}},{key:"scrollToElement",value:function(t,e,i,s,n){if(t&&(t=t.nodeType?t:this.scroller.querySelector(t),!this.options.wheel||"wheel-item"===t.className)){var o=(0,a.offset)(t);o.left-=this.wrapperOffset.left,o.top-=this.wrapperOffset.top,i===!0&&(i=Math.round(t.offsetWidth/2-this.wrapper.offsetWidth/2)),s===!0&&(s=Math.round(t.offsetHeight/2-this.wrapper.offsetHeight/2)),o.left-=i||0,o.top-=s||0,o.left=o.left>0?0:o.left<this.maxScrollX?this.maxScrollX:o.left,o.top=o.top>0?0:o.top<this.maxScrollY?this.maxScrollY:o.top,this.options.wheel&&(o.top=Math.round(o.top/this.itemHeight)*this.itemHeight),e=void 0===e||null===e||"auto"===e?Math.max(Math.abs(this.x-o.left),Math.abs(this.y-o.top)):e,this.scrollTo(o.left,o.top,e,n)}}},{key:"getComputedPosition",value:function(){var t=window.getComputedStyle(this.scroller,null),e=void 0,i=void 0;return this.options.useTransform?(t=t[a.style.transform].split(")")[0].split(", "),e=+(t[12]||t[4]),i=+(t[13]||t[5])):(e=+t.left.replace(/[^-\d.]/g,""),i=+t.top.replace(/[^-\d.]/g,"")),{x:e,y:i}}},{key:"goToPage",value:function(t,e,i){var s=arguments.length<=3||void 0===arguments[3]?a.ease.bounce:arguments[3];t>=this.pages.length?t=this.pages.length-1:t<0&&(t=0),e>=this.pages[t].length?e=this.pages[t].length-1:e<0&&(e=0);var n=this.pages[t][e].x,o=this.pages[t][e].y;i=void 0===i?this.options.snapSpeed||Math.max(Math.max(Math.min(Math.abs(n-this.x),1e3),Math.min(Math.abs(o-this.y),1e3)),300):i,this.currentPage={x:n,y:o,pageX:t,pageY:e},this.scrollTo(n,o,i,s)}},{key:"next",value:function(t,e){var i=this.currentPage.pageX,s=this.currentPage.pageY;i++,i>=this.pages.length&&this.hasVerticalScroll&&(i=0,s++),this.goToPage(i,s,t,e)}},{key:"prev",value:function(t,e){var i=this.currentPage.pageX,s=this.currentPage.pageY;i--,i<0&&this.hasVerticalScroll&&(i=0,s--),this.goToPage(i,s,t,e)}},{key:"destroy",value:function(){this._removeEvents(),this.destroyed=!0,this.trigger("destroy")}},{key:"handleEvent",value:function(t){switch(t.type){case"touchstart":case"mousedown":this._start(t);break;case"touchmove":case"mousemove":this._move(t);break;case"touchend":case"mouseup":case"touchcancel":case"mousecancel":this._end(t);break;case"orientationchange":case"resize":this._resize();break;case"transitionend":case"webkitTransitionEnd":case"oTransitionEnd":case"MSTransitionEnd":this._transitionEnd(t);break;case"click":!this.enabled||t._constructed||/(SELECT|INPUT|TEXTAREA)/i.test(t.target.tagName)||(t.preventDefault(),t.stopPropagation())}}}]),e}(a.EventEmitter)},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s=i(3);Object.keys(s).forEach(function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return s[t]}})});var n=i(4);Object.keys(n).forEach(function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return n[t]}})});var o=i(5);Object.keys(o).forEach(function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return o[t]}})});var r=i(6);Object.keys(r).forEach(function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return r[t]}})});var a=i(7);Object.keys(a).forEach(function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return a[t]}})});var h=i(8);Object.keys(h).forEach(function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return h[t]}})})},function(t,e){"use strict";function i(t){return d!==!1&&("standard"===d?t:d+t.charAt(0).toUpperCase()+t.substr(1))}function s(t,e,i,s){t.addEventListener(e,i,{passive:!1,capture:!!s})}function n(t,e,i,s){t.removeEventListener(e,i,!!s)}function o(t){for(var e=0,i=0;t;)e-=t.offsetLeft,i-=t.offsetTop,t=t.offsetParent;return{left:e,top:i}}function r(t){if(t instanceof window.SVGElement){var e=t.getBoundingClientRect();return{top:e.top,left:e.left,width:e.width,height:e.height}}return{top:t.offsetTop,left:t.offsetLeft,width:t.offsetWidth,height:t.offsetHeight}}function a(t,e){for(var i in e)if(e[i].test(t[i]))return!0;return!1}function h(t,e){var i=document.createEvent("Event");i.initEvent(e,!0,!0),i.pageX=t.pageX,i.pageY=t.pageY,t.target.dispatchEvent(i)}function l(t){var e=t.target;if(!/(SELECT|INPUT|TEXTAREA)/i.test(e.tagName)){var i=document.createEvent(window.MouseEvent?"MouseEvents":"Event");i.initEvent("click",!0,!0),i._constructed=!0,e.dispatchEvent(i)}}function c(t,e){e.firstChild?u(t,e.firstChild):e.appendChild(t)}function u(t,e){e.parentNode.insertBefore(t,e)}Object.defineProperty(e,"__esModule",{value:!0}),e.addEvent=s,e.removeEvent=n,e.offset=o,e.getRect=r,e.preventDefaultException=a,e.tap=h,e.click=l,e.prepend=c,e.before=u;var p=document.createElement("div").style,d=function(){var t={webkit:"webkitTransform",Moz:"MozTransform",O:"OTransform",ms:"msTransform",standard:"transform"};for(var e in t)if(void 0!==p[t[e]])return e;return!1}(),f=i("transform"),m=(e.hasPerspective=i("perspective")in p,e.hasTouch="ontouchstart"in window,e.hasTransform=f!==!1,e.hasTransition=i("transition")in p,e.style={transform:f,transitionTimingFunction:i("transitionTimingFunction"),transitionDuration:i("transitionDuration"),transitionDelay:i("transitionDelay"),transformOrigin:i("transformOrigin"),transitionEnd:i("transitionEnd")},1),g=2;e.eventType={touchstart:m,touchmove:m,touchend:m,mousedown:g,mousemove:g,mouseup:g}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.isBadAndroid=/Android /.test(window.navigator.appVersion)&&!/Chrome\/\d/.test(window.navigator.appVersion)},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.ease={swipe:{style:"cubic-bezier(0.23, 1, 0.32, 1)",fn:function(t){return 1+--t*t*t*t*t}},swipeBounce:{style:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",fn:function(t){return t*(2-t)}},bounce:{style:"cubic-bezier(0.165, 0.84, 0.44, 1)",fn:function(t){return 1- --t*t*t*t}}}},function(t,e){"use strict";function i(t){if(Array.isArray(t)){for(var e=0,i=Array(t.length);e<t.length;e++)i[e]=t[e];return i}return Array.from(t)}function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var n=function(){function t(t,e){var i=[],s=!0,n=!1,o=void 0;try{for(var r,a=t[Symbol.iterator]();!(s=(r=a.next()).done)&&(i.push(r.value),!e||i.length!==e);s=!0);}catch(h){n=!0,o=h}finally{try{!s&&a["return"]&&a["return"]()}finally{if(n)throw o}}return i}return function(e,i){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return t(e,i);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),o=function(){function t(t,e){for(var i=0;i<e.length;i++){var s=e[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}return function(e,i,s){return i&&t(e.prototype,i),s&&t(e,s),e}}();e.EventEmitter=function(){function t(){s(this,t),this._events={}}return o(t,[{key:"on",value:function(t,e){var i=arguments.length<=2||void 0===arguments[2]?this:arguments[2];this._events[t]||(this._events[t]=[]),this._events[t].push([e,i])}},{key:"once",value:function(t,e){function i(){this.off(t,i),n||(n=!0,e.apply(s,arguments))}var s=arguments.length<=2||void 0===arguments[2]?this:arguments[2],n=!1;this.on(t,i)}},{key:"off",value:function(t,e){var i=this._events[t];if(i)for(var s=i.length;s--;)i[s][0]===e&&(i[s][0]=void 0)}},{key:"trigger",value:function(t){var e=this._events[t];if(e)for(var s=e.length,o=[].concat(i(e)),r=0;r<s;r++){var a=o[r],h=n(a,2),l=h[0],c=h[1];l&&l.apply(c,[].slice.call(arguments,1))}}}]),t}()},function(t,e){"use strict";function i(t,e,i,s,n,o){var r=t-e,a=Math.abs(r)/i,h=o.deceleration,l=o.itemHeight,c=o.swipeBounceTime,u=o.bounceTime,p=o.swipeTime,d=o.wheel?4:15,f=t+a/h*(r<0?-1:1);return o.wheel&&l&&(f=Math.round(f/l)*l),f<s?(f=n?s-n/d*a:s,p=c-u):f>0&&(f=n?n/d*a:0,p=c-u),{destination:Math.round(f),duration:p}}Object.defineProperty(e,"__esModule",{value:!0}),e.momentum=i},function(t,e){"use strict";function i(t,e){for(var i in e)t[i]=e[i]}Object.defineProperty(e,"__esModule",{value:!0}),e.extend=i;var s=100/60;e.requestAnimationFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||function(t){return window.setTimeout(t,(t.interval||s)/2)}}(),e.cancelAnimationFrame=function(){return window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.oCancelAnimationFrame||function(t){window.clearTimeout(t)}}()}])});

3.2 使用详情参考

https://github.com/ustbhuangyi/better-scroll

3.3 参数详情参考

https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#%E8%B5%B7%E6%AD%A5

代码案例来自，ustbhuangyi 课件学习整理所得，仅作为学习使用

bscroll制作轮播图，jq和vue两种方式，带下边的点点相关推荐

微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
Axure使用动态面板制作轮播图
对于动态面板的使用我想每一个学习axure的小伙伴都会接触到,聪明的你可能会想,能不能利用动态面板制作出轮播图的效果能?不用怀疑 ,利用动态面板也是能做出好看的轮播图的效果的.那么,下边我就来分享一下 ...
制作轮播图的几种方式
目录 css制作轮播图思路 animation详解具体制作 js制作轮播图思路内容详解 css制作轮播图思路主要通过一个展示盒子,一个图片储存盒子,展示盒子的大小即为轮播图想要展示图片的大 ...
【Axure RP9 制作轮播图】
Axure RP9 制作轮播图说在前面:由于版本差异,在Axure学习过程中遇到一点点麻烦,网上没找到答案,最终自己弄出来了,在此记录一下.(课程上是axure8,我用的axure9,个别地方有些差 ...
利用CSS 3 的动画相关属性制作轮播图特效
本示例给出了只利用CSS3的动画属性制作下图所示的轮播图特效的步骤. Step 1:定义用来展示效果的容器div (1)设置其背景色 (2)让其大小与浏览器的比例合适,并且让其水平.垂直居中: 例如: ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
Swiper4.3.3 制作轮播图
想要的轮播图效果如下:(gif制作可参考这篇文章) 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
制作轮播图思路 ~ 使用JS做一个轮播图，先在脑海里捋一捋逻辑，我的思路是这样的，看图啦：
制作一个功能比较全的轮播图,应该怎么下手呢?我的思路比较中规中矩,如果不知道怎么下手的,看看我的思路吧,看完一定要着手试试哦~
Axure知识点：如何制作轮播图效果（以泉州师范学院官网为例）
摘要:微信搜索[三桥君] 使用软件:Axure RP 9软件说明:实现方式不唯一,这里给出三桥君制作的一种方式. 一.问题本篇文章三桥君主要解决关于轮播图交互效果的设置,以泉师新闻轮播图为例. 该 ...

bscroll制作轮播图，jq和vue两种方式，带下边的点点

bscroll制作轮播图，jq和vue两种方式，带下边的点点相关推荐

最新文章

热门文章