iSlider手机端图片滑动切换插件使用详解

自适应轮播图，支持手机触屏滑动，三种切换效果。

效果图：

js：

var iSlider = function(opts) {
 if (!opts.dom) {
  throw new Error("dom element can not be empty!");
 }
 if (!opts.data || !opts.data.length) {
  throw new Error("data must be an array and must have more than one element!");
 }
 this._opts = opts;
 this._setting();
 this._renderHTML();
 this._bindHandler();
};
iSlider.prototype._setting = function() {
 var opts = this._opts;
 this.wrap = opts.dom;
 this.data = opts.data;
 this.type = opts.type || 'pic';
 this.isVertical = opts.isVertical || false;
 this.onslide = opts.onslide;
 this.onslidestart = opts.onslidestart;
 this.onslideend = opts.onslideend;
 this.onslidechange = opts.onslidechange;
 this.duration = opts.duration || 4000;
 this.log = opts.isDebug ?
 function(str) {
  console.log(str)
 }: function() {};
 this.axis = this.isVertical ? 'Y': 'X';
 this.width = this.wrap.clientWidth;
 this.height = this.wrap.clientHeight;
 this.ratio = this.height / this.width;
 this.scale = opts.isVertical ? this.height: this.width;
 this.sliderIndex = this.sliderIndex || 0;
 if (this.data.length < 2) {
  this.isLooping = false;
  this.isAutoPlay = false;
 } else {
  this.isLooping = opts.isLooping || false;
  this.isAutoplay = opts.isAutoplay || false;
 }
 if (this.isAutoplay) {
  this.play();
 }
 this._setUpDamping();
 this._animateFunc = (opts.animateType in this._animateFuncs) ? this._animateFuncs[opts.animateType] : this._animateFuncs['default'];
 this._setPlayWhenFocus();
};
iSlider.prototype._setPlayWhenFocus = function() {
 var self = this;
 window.addEventListener('focus',
 function() {
  self.isAutoplay && self.play();
 },
 false);
 window.addEventListener('blur',
 function() {
  self.pause();
 },
 false);
}
iSlider.prototype._animateFuncs = {
 'default': function(dom, axis, scale, i, offset) {
  dom.style.webkitTransform = 'translateZ(0) translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)';
 },
 'rotate': function(dom, axis, scale, i, offset) {
  var rotateDirect = (axis == "X") ? "Y": "X";
  var absoluteOffset = Math.abs(offset);
  var bdColor = window.getComputedStyle(this.wrap.parentNode, null).backgroundColor;
  if (this.isVertical) {
   offset = -offset;
  }
  this.wrap.style.webkitPerspective = scale * 4;
  if (i == 1) {
   dom.style.zIndex = scale - absoluteOffset;
  } else {
   dom.style.zIndex = (offset > 0) ? (1 - i) * absoluteOffset: (i - 1) * absoluteOffset;
  }
  dom.style.backgroundColor = bdColor || '#333';
  dom.style.position = 'absolute';
  dom.style.webkitBackfaceVisibility = 'hidden';
  dom.style.webkitTransformStyle = 'preserve-3d';
  dom.style.webkitTransform = 'rotate' + rotateDirect + '(' + 90 * (offset / scale + i - 1) + 'deg) translateZ(' + (0.888 * scale / 2) + 'px) scale(0.888)';
 },
 'flip': function(dom, axis, scale, i, offset) {
  var rotateDirect = (axis == "X") ? "Y": "X";
  var bdColor = window.getComputedStyle(this.wrap.parentNode, null).backgroundColor;
  if (this.isVertical) {
   offset = -offset;
  }
  this.wrap.style.webkitPerspective = scale * 4;
  if (offset > 0) {
   dom.style.visibility = (i > 1) ? 'hidden': 'visible';
  } else {
   dom.style.visibility = (i < 1) ? 'hidden': 'visible';
  }
  dom.style.backgroundColor = bdColor || '#333';
  dom.style.position = 'absolute';
  dom.style.webkitBackfaceVisibility = 'hidden';
  dom.style.webkitTransform = 'translateZ(' + (scale / 2) + 'px) rotate' + rotateDirect + '(' + 180 * (offset / scale + i - 1) + 'deg) scale(0.875)';
 },
 'depth': function(dom, axis, scale, i, offset) {
  var rotateDirect = (axis == "X") ? "Y": "X";
  var zoomScale = (4 - Math.abs(i - 1)) * 0.15;
  this.wrap.style.webkitPerspective = scale * 4;
  if (i == 1) {
   dom.style.zIndex = 100;
  } else {
   dom.style.zIndex = (offset > 0) ? (1 - i) : (i - 1);
  }
  dom.style.webkitTransform = 'scale(' + zoomScale + ', ' + zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + 1.3 * scale * (i - 1)) + 'px)';
 },
 'tear': function(dom, axis, scale, i, offset) {
  var rotateDirect = (axis == "X") ? "Y": "X";
  var zoomScale = 1 - (Math.abs(i - 1) * 0.2);
  this.wrap.style.webkitPerspective = scale * 4;
  if (i == 1) {
   dom.style.zIndex = 100;
  } else {
   dom.style.zIndex = (offset > 0) ? (1 - i) : (i - 1);
  }
  dom.style.webkitTransform = 'scale(' + zoomScale + ', ' + zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)';
 }
}
iSlider.prototype._setUpDamping = function() {
 var oneIn2 = this.scale >> 1;
 var oneIn4 = oneIn2 >> 1;
 var oneIn16 = oneIn4 >> 2;
 this._damping = function(distance) {
  var dis = Math.abs(distance);
  var result;
  if (dis < oneIn2) {
   result = dis >> 1;
  } else if (dis < oneIn2 + oneIn4) {
   result = oneIn4 + ((dis - oneIn2) >> 2);
  } else {
   result = oneIn4 + oneIn16 + ((dis - oneIn2 - oneIn4) >> 3);
  }
  return distance > 0 ? result: -result;
 };
};
iSlider.prototype._renderItem = function(i) {
 var item, html;
 var len = this.data.length;
 if (!this.isLooping) {
  item = this.data[i] || {
   empty: true
  };
 } else {
  if (i < 0) {
   item = this.data[len + i];
  } else if (i > len - 1) {
   item = this.data[i - len];
  } else {
   item = this.data[i];
  }
 }
 if (item.empty) {
  return '';
 }
 if (this.type === 'pic') {
  html = item.height / item.width > this.ratio ? '<img height="' + this.height + '" src="' + item.content + '">': '<img width="' + this.width + '" src="' + item.content + '">';
 } else if (this.type === 'dom') {
  html = '<div style="height:' + item.height + ';width:' + item.width + ';">' + item.content + '</div>';
 } else if (this.type === 'overspread') {
  html = this.ratio < 1 ? '<div style="height: 100%; width:100%; background:url(' + item.content + ') center no-repeat; background-size:' + this.width + 'px auto;"></div>': '<div style="height: 100%; width:100%; background:url(' + item.content + ') center no-repeat; background-size: auto ' + this.height + 'px;"></div>';
 }
 return html;
};
iSlider.prototype._renderHTML = function() {
 var outer;
 if (this.outer) {
  this.outer.innerHTML = '';
  outer = this.outer;
 } else {
  outer = document.createElement('ul');
 }
 outer.style.width = this.width + 'px';
 outer.style.height = this.height + 'px';
 this.els = [];
 for (var i = 0; i < 3; i++) {
  var li = document.createElement('li');
  li.style.width = this.width + 'px';
  li.style.height = this.height + 'px';
  this._animateFunc(li, this.axis, this.scale, i, 0);
  this.els.push(li);
  outer.appendChild(li);
  if (this.isVertical && (this._opts.animateType == 'rotate' || this._opts.animateType == 'flip')) {
   li.innerHTML = this._renderItem(1 - i + this.sliderIndex);
  } else {
   li.innerHTML = this._renderItem(i - 1 + this.sliderIndex);
  }
 }
 if (!this.outer) {
  this.outer = outer;
  this.wrap.appendChild(outer);
 }
};
iSlider.prototype._slide = function(n) {
 var data = this.data;
 var els = this.els;
 var idx = this.sliderIndex + n;
 if (data[idx]) {
  this.sliderIndex = idx;
 } else {
  if (this.isLooping) {
   this.sliderIndex = n > 0 ? 0 : data.length - 1;
  } else {
   n = 0;
  }
 }
 this.log('pic idx:' + this.sliderIndex);
 var sEle;
 if (this.isVertical && (this._opts.animateType == 'rotate' || this._opts.animateType == 'flip')) {
  if (n > 0) {
   sEle = els.pop();
   els.unshift(sEle);
  } else if (n < 0) {
   sEle = els.shift();
   els.push(sEle);
  }
 } else {
  if (n > 0) {
   sEle = els.shift();
   els.push(sEle);
  } else if (n < 0) {
   sEle = els.pop();
   els.unshift(sEle);
  }
 }
 if (n !== 0) {
  sEle.innerHTML = this._renderItem(idx + n);
  sEle.style.webkitTransition = 'none';
  sEle.style.visibility = 'hidden';
  setTimeout(function() {
   sEle.style.visibility = 'visible';
  },
  200);
  this.onslidechange && this.onslidechange(this.sliderIndex);
 }
 for (var i = 0; i < 3; i++) {
  if (els[i] !== sEle) {
   els[i].style.webkitTransition = 'all .3s ease';
  }
  this._animateFunc(els[i], this.axis, this.scale, i, 0);
 }
 if (this.isAutoplay) {
  if (this.sliderIndex === data.length - 1 && !this.isLooping) {
   this.pause();
  }
 }
};
iSlider.prototype._bindHandler = function() {
 var self = this;
 var scaleW = self.scaleW;
 var outer = self.outer;
 var len = self.data.length;
 var startHandler = function(evt) {
  self.pause();
  self.onslidestart && self.onslidestart();
  self.log('Event: beforeslide');
  self.startTime = new Date().getTime();
  self.startX = evt.targetTouches[0].pageX;
  self.startY = evt.targetTouches[0].pageY;
  var target = evt.target;
  while (target.nodeName != 'LI' && target.nodeName != 'BODY') {
   target = target.parentNode;
  }
  self.target = target;
 };
 var moveHandler = function(evt) {
  evt.preventDefault();
  self.onslide && self.onslide();
  self.log('Event: onslide');
  var axis = self.axis;
  var offset = evt.targetTouches[0]['page' + axis] - self['start' + axis];
  if (!self.isLooping) {
   if (offset > 0 && self.sliderIndex === 0 || offset < 0 && self.sliderIndex === self.data.length - 1) {
    offset = self._damping(offset);
   }
  }
  for (var i = 0; i < 3; i++) {
   var item = self.els[i];
   item.style.webkitTransition = 'all 0s';
   self._animateFunc(item, axis, self.scale, i, offset);
  }
  self.offset = offset;
 };
 var endHandler = function(evt) {
  evt.preventDefault();
  var boundary = self.scale / 2;
  var metric = self.offset;
  var endTime = new Date().getTime();
  boundary = endTime - self.startTime > 300 ? boundary: 14;
  if (metric >= boundary) {
   self._slide( - 1);
  } else if (metric < -boundary) {
   self._slide(1);
  } else {
   self._slide(0);
  }
  self.isAutoplay && self.play();
  self.offset = 0;
  self.onslideend && self.onslideend();
  self.log('Event: afterslide');
 };
 var orientationchangeHandler = function(evt) {
  setTimeout(function() {
   self.reset();
   self.log('Event: orientationchange');
  },
  100);
 };
 outer.addEventListener('touchstart', startHandler);
 outer.addEventListener('touchmove', moveHandler);
 outer.addEventListener('touchend', endHandler);
 window.addEventListener('orientationchange', orientationchangeHandler);
};
iSlider.prototype.reset = function() {
 this.pause();
 this._setting();
 this._renderHTML();
 this.isAutoplay && this.play();
};
iSlider.prototype.play = function() {
 var self = this;
 var duration = this.duration;
 clearInterval(this.autoPlayTimer);
 this.autoPlayTimer = setInterval(function() {
  self._slide(1);
 },
 duration);
};
iSlider.prototype.pause = function() {
 clearInterval(this.autoPlayTimer);
};
iSlider.prototype.extend = function(plugin) {
 var fn = iSlider.prototype;
 Object.keys(plugin).forEach(function(property) {
  Object.defineProperty(fn, property, Object.getOwnPropertyDescriptor(plugin, property));
 })
}
iSlider.prototype.extend({
 bindMouse: function() {
  var self = this;
  var scaleW = self.scaleW;
  var outer = self.outer;
  var len = self.data.length;
  var bDrag = false;
  var mouseStart = function(evt) {
   bDrag = true;
   self.pause();
   self.onslidestart && self.onslidestart();
   self.startTime = new Date().getTime();
   self.startX = evt.clientX;
   self.startY = evt.clientY;
   var target = evt.target;
   while (target.nodeName != 'LI' && target.nodeName != 'BODY') {
    target = target.parentNode;
   }
   self.target = target;
  };
  var mouseMove = function(evt) {
   if (bDrag) {
    evt.preventDefault();
    self.onslide && self.onslide();
    var axis = self.axis;
    var offset = evt['client' + axis] - self['start' + axis];
    if (!self.isLooping) {
     if (offset > 0 && self.sliderIndex === 0 || offset < 0 && self.sliderIndex === self.data.length - 1) {
      offset = self._damping(offset);
     }
    }
    for (var i = 0; i < 3; i++) {
     var item = self.els[i];
     item.style.webkitTransition = 'all 0s';
     self._animateFunc(item, axis, self.scale, i, offset);
    }
    self.offset = offset;
   }
  };
  var mouseEnd = function(evt) {
   evt.preventDefault();
   bDrag = false;
   var boundary = self.scale / 2;
   var metric = self.offset;
   var endTime = new Date().getTime();
   boundary = endTime - self.startTime > 300 ? boundary: 14;
   if (metric >= boundary) {
    self._slide( - 1);
   } else if (metric < -boundary) {
    self._slide(1);
   } else {
    self._slide(0);
   }
   self.isAutoplay && self.play();
   self.offset = 0;
   self.onslideend && self.onslideend();
   self.log('Event: afterslide');
  };
  outer.addEventListener('mousedown', mouseStart);
  outer.addEventListener('mousemove', mouseMove);
  outer.addEventListener('mouseup', mouseEnd);
 }
})

html：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  *{
   padding: 0;
   list-style: none;
   margin: 0;
  }
  /*容器高度*/
  #iSlider-effect-wrapper {
   height: 400px;
   width: 500px;
   margin: 0 auto;
   margin-top: 4.6rem;
   overflow: hidden;
   position: relative;
  }
  .iSlider-effect ul{
   list-style: none;
   padding: 0;
   margin: 0;
   height: 100%;
   overflow: hidden
  }
  .iSlider-effect li {
   position: absolute;
   margin: 0;
   padding: 0;
   height: 100%;
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-pack: center;
   -webkit-box-align: center;
   list-style: none
  }
  .iSlider-effect ul li img {
   max-width: 100%;
   max-height: 100%;
   margin: 0;
   padding: 0
  }
  .iSlider-effect div {
   background-color: #fff;
   padding: 3px
  }
 </style>
</head>
<body>
 <script type="text/javascript" src="mobile_slider.js"></script>
 <!--组件容器-->
 <div id="iSlider-effect-wrapper"> </div>
 <script>
  //组件注册
  var islider1 = new iSlider({
   //节点获取
   dom: document.getElementById("iSlider-effect-wrapper"),
   //图片配置
   data: [
    {
     content: "images/01.jpeg",
    },
    {
     content: "images/04.jpg",
    },
    {
     content: "images/05.jpg",
    }
   ],
   //播放间隔
   duration: 3000,
   //animateType切换方式
   //default：默认
   //rotate：旋转
   //flip：弹出
   animateType: 'rotate',
   //是否自动播放
   isAutoplay: true,
   //是否循环播放
   isLooping: true,
   // isVertical: true, 是否垂直滚动
  });
  islider1.bindMouse();
 </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。