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 = [&＃39;transform&＃39;, &＃39;webkitTransform&＃39;, &＃39;MozTransform&＃39;, &＃39;msTranform&＃39;, &＃39;OTransform&＃39;],
      vendors = [&＃39;&＃39;, &＃39;webkit&＃39;, &＃39;Moz&＃39;, &＃39;ms&＃39;, &＃39;O&＃39;],
      elementStyle = document.createElement(&＃39;div&＃39;).style

    for (var i = 0; i  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 
更多炫酷Javascript特效代码，尽在：Javascript特效
以上就是js如何实现滑动插件的详细内容，更多请关注 第一PHP社区 其它相关文章！