js如何实现滑动插件

基本思路是封装一个Slider类， 拥有默认初始配置参数。

Slider.prototype(原型链上)拥有实现滑动的方法，通过监听手势，实现滑动的效果。

比较复杂的滑动效果， 可以使用Swiper.js 来实现。

（推荐教程：javascript教程）

代码如下：

/* PollyFill for iOS 5.* */ if (!Function.prototype.bind) {   Function.prototype.bind = function (oThis) {     var args = Array.prototype.slice.call(arguments, 1)     var f2bind = this     var fnop = function () {}     var bound = function () {       return f2bind.apply(this instanceof fnop && oThis         ? this         : oThis,         args.concat(Array.prototype.slice.call(arguments)))     }     fnop.prototype = this.prototype     bound.prototype = new fnop()     return bound   } }  // 添加浏览器前缀 function prefix(style) {   var vendor = (function() {     var transArr = ['transform', 'webkitTransform', 'MozTransform', 'msTranform', 'OTransform'],       vendors = ['', 'webkit', 'Moz', 'ms', 'O'],       elementStyle = document.createElement('div').style      for (var i = 0; i < vendors.length; i++) {       if (transArr[i] in elementStyle) {         return vendors[i]       }     }      return false   })()    if (vendor === false) return false   if (vendor === '') return style   return vendor + style.charAt(0).toUpperCase() + style.substr(1) }  var TRANSFORM = prefix('transform'),   TRANSITION = prefix('transition')  var Slider = function(options) {   // 初始化配置参数   this.options = $.extend({     slideWrap: '.pages',  // 容器     slideItem: '.page', // 滑动单元的元素     direction: 'Y', // 滑动的方向     effect: 'slide',  // 滑动的效果     triggleDist: 100,  // 触发滑动的手指移动最小位移     followFinger: true, // 是否跟随手指移动     duration: .4,  // 翻页的延时     currentIdx: 0  // 初始显示的页码   }, options)    var EffectDict = {     'slide' : ['slide', 'slide'],     'scale' : ['slide', 'scale']   }    this.pagesWrap = document.querySelector(this.options.slideWrap)   this.pages = document.querySelectorAll(this.options.slideItem)    this.hook = this.options.slideController   this._total = this.pages.length   this._pageX = 0   this._pageY = 0   this._distance = 0 // 页面之间切换的距离   this._moveDist = 0 // touch 滑动的距离   this._supportTouch = 'ontouchend' in window   this._touching = false    this._enter = this[EffectDict[this.options.effect][0]].bind(this)   this._leave = this[EffectDict[this.options.effect][1]].bind(this)    this._init()   this._bindEvents() } Slider.prototype = {   _init: function() {     var width = this.pagesWrap.clientWidth,       height = this.pagesWrap.clientHeight,       currentIdx = this.options.currentIdx,       pages = this.pages,       total = this._total,       distance = this._distance = (this.options.direction == 'Y' ? height : width)      // 初始化各个 page 的位置     for (var i = 0; i < this._total; i++) {       if (i == currentIdx) {         pages[i].classList.add('current')       } else {         this._enter(pages[i], i < currentIdx ? -distance : distance, 2)       }     }   },    _bindEvents: function() {     var _this = this,       pagesWrap = this.pagesWrap      var events = this._supportTouch ? 'touchstart touchmove touchend touchcancel' : 'mousedown mousemove mouseup mousecancel'      events.split(' ').forEach(function(e) {       pagesWrap.addEventListener(e, _this)     })      window.addEventListener('orientationchange', this)     window.addEventListener('resize', this)   },    handleEvent: function(e) {     switch (e.type) {       case 'orientationchange':       case 'resize':         this._init()         break       case 'touchstart':       case 'mousedown':         this._start(e)         break       case 'touchmove':       case 'mousemove':         this._move(e)         break       case 'touchend':       case 'touchcancel':       case 'mouseup':       case 'mousecancel':         this._end(e)         break     }   },    _start: function(e) {     if (this._touching) {       e.preventDefault()       e.stopPropagation()       return     }      this._touching = true     this._moveDist = 0      var touches = (this._supportTouch ? e.touches[0] : e),       distance = this._distance,       enter = this._enter      var $current = this.pages[this.options.currentIdx],       $next = $current.nextElementSibling,       $prev = $current.previousElementSibling      this._pageX = touches.pageX     this._pageY = touches.pageY      $current.style.zIndex = 1      if ($next) {       $next.style.zIndex = 2       enter($next, distance)     }      if ($prev) {       $prev.style.zIndex = 2       enter($prev, -distance)     }   },    _move: function(e) {     e.preventDefault()      if (!this._touching) return      var touches = (this._supportTouch ? e.touches[0] : e),       direction = this.options.direction,       distance = this._distance      var currentIdx = this.options.currentIdx,       $current = this.pages[this.options.currentIdx],       $next = $current.nextElementSibling,       $prev = $current.previousElementSibling,       xDist = touches.pageX - this._pageX,       yDist = touches.pageY - this._pageY,       enter = this._enter,       leave = this._leave,       moveDist = this._moveDist = (direction == 'X' ? xDist : yDist)      if (this.options.followFinger) {       $next && enter($next, moveDist + distance)       $prev && enter($prev, moveDist - distance)        // 因为不能翻页，所以制造拖动困难的效果       if ((currentIdx == 0 && moveDist > 0) || (currentIdx == this._total && moveDist < 0)) {         return this.slide($current, moveDist / 4)       }        leave($current, moveDist)     }   },    _end: function(e) {     var move = this._moveDist,       distance = this._distance,       triggleDist = this.options.triggleDist,       enter = this._enter,       $current = this.pages[this.options.currentIdx],       $next = $current.nextElementSibling,       $prev = $current.previousElementSibling      this._touching = false      this._enter($current, 0)     $next && enter($next, distance)     $prev && enter($prev, -distance)      if ($next && move < -triggleDist && this.hook.shouldGoToNext($current)) return this._next()     if ($prev && move > triggleDist && this.hook.shouldGoToPrev($current)) return this._prev()   },    _next: function() {     this.go2page(this.options.currentIdx + 1)   },    _prev: function() {     this.go2page(this.options.currentIdx - 1)   },    go2page: function(idx) {      var $current = this.pages[this.options.currentIdx],       $target = this.pages[idx],       enter = this._enter,       leave = this._leave,       distance = (idx < this.options.currentIdx ? this._distance : -this._distance)      $($target).one('webkitTransitionEnd', function() {       $current.classList.remove('current')       $target.classList.add('current')       this.hook.didGoToPage($target, $current)     }.bind(this))      leave($current, distance)     enter($target, 0)      this._moveDist = 0     this.options.currentIdx = idx   },     /**    * 切页的效果    * 目前只支持两种效果：    * 1. Slide（普通的滑动）    * 2. Scale（缩放滑动）    */   slide: function(el, val, need) {     need = need || 1     el.style.webkitTransition = (need == 1) ? 'all 0.4s' : ''     el.style[TRANSFORM] = 'translate3d(' + ('Y' == this.options.direction ? '0, ' + val + 'px' : (val + 'px, 0')) + ',0)'   },    scale: function(el, val) {     el.style.webkitTransition = 'all 0.4s'     el.style[TRANSFORM] = 'scale(' + (1 - Math.round(Math.abs(val) / this._distance / 4*100) / 100) + ') translateZ(0)'   } }  var slideController = {   shouldGoToPrev: function(el) {     return false;   },   shouldGoToNext: function(el) {     return false;;   },   didGoToPage: function(el, prevEl) {     return false;   } }   function query(selector){   return document.querySelector(selector); }

相关视频教程推荐：javascript视频教程