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>

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

(0)

相关推荐

  • Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片

    轮播图可以通过点击按钮来跳到上一张或者下一张,在移动端我们常用的就是通过滑动来实现一些时间,那么如何实现呢. 以下是通过bootstrap的Carousel和dropload.js(移动端上下拉动刷新插件)的实现方法. HTML部分 <div id="goods_lunbo" style="width:200%;overflow:hidden;margin-left:-50%;"> <div id="goods_lunbo2"

  • js实现支持手机滑动切换的轮播图片效果实例

    本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

  • wap手机图片滑动切换特效无css3元素js脚本编写

    手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上完蛋了,所 有下定决心自己做一个,谁知出现了很多的问题,其中最重要的是给图片加链接,网页中的上下滚动条不能在拖动图片的时候滚动,并且不能兼容pc机器上的拖动:在这里就简单介绍一下遇到的问题和解决的方法: 问题一:给图片加上链接后,在拖动的时候总是跳到其他页面: 问题根源主要是不能判断是点击还是拖动,

  • javascript 图片滑动切换代码

    nVida网站图片滑动-http://www.jb51.net #changebox{width:610px;height:342px;overflow:hidden; position:relative;} #changebox #changeAction{width:1220px;height:342px; position:absolute; } #changebox #changeAction #links{width:610px;height:342px;background:#000

  • JavaScript实现图片滑动切换的代码示例分享

    假设我们这里有1到5五张bmp图片,那么控制图片切换显示的核心代码可以为: <script> var i=1; var img = new Array(); img[0] = "1.bmp"; img[1] = "2.bmp"; img[2] = "3.bmp"; img[3] = "4.bmp"; img[4] = "5.bmp"; function playImg(){ i=i+1; var

  • 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 e

  • Vue.js图片预览插件使用详解

    Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 如果你想在深入学习 Vue 之前对它有更多了解,我们制作了一个视频,带您了解其核心概念和一个示例工程. 如果你已经是有经验的前端开发者,想知道 Vue

  • 微信小程序 监听手势滑动切换页面实例详解

    微信小程序 监听手势滑动切换页面实例详解 1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view> 2.js: var touchDot = 0;//触摸时的原点 var time = 0;// 时

  • js图片无缝滚动插件使用详解

    本文实例为大家分享了js图片无缝滚动插件的具体代码,供大家参考,具体内容如下 css ul { list-style: none; margin: 0; padding: 0; } .slide-img-ul { white-space: nowrap; } .slide-img-ul>li { width: 100px; height: 100px; margin: 10px; display: inline-block; vertical-align: middle } .slide-img

  • JQuery实现简单的图片滑动切换特效

    JQuery实现简单的图片滑动切换特效 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>t图片的滑动</title> <meta charset="utf-8" /> <style type="text/css" > *{ margin:0

  • jQuery实现菜单式图片滑动切换

    jQuery菜单式图片滑动切换是一款天猫官方网站的鼠标滑过图片切换导航菜单特效. 复制代码 代码如下: $(function(){     // floorCon-slide     $(".floorCon-slide .floorConSlideImgNav li span").css({opacity:0.95})     $(".floorCon-slide .floorConSlideImgNav li.hover").find("span&qu

  • Android Flutter实现图片滑动切换效果

    目录 前言 SlideTransition 介绍 示例效果实现 总结 前言 我们开始来介绍转换类的动画组件,实际上这类转换动画组件也可以自己通过 AnimatedBuilder 或 AnimatedWidget 完成, Flutter 为了简化开发,提供了不少转换动画组件,这类组件通常命名为 xxTransition.本篇要介绍的就是 SlideTransition,顾名思义,就知道是滑动转换动画.我们本篇来实现两张小姐姐图片的滑动切换,效果如下图所示. SlideTransition 介绍 S

  • Bootstrap 附加导航(Affix)插件实例详解

    附加导航(Affix)插件允许某个 <div> 固定在页面的某个位置.您也可以在打开或关闭使用该插件之间进行切换.一个常见的例子是社交图标.它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不会随着页面其他部分一起滚动. 如果您想要单独引用该插件的功能,那么您需要引用 affix.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用bootstrap.js 或压缩版的 bootstrap.min.js. 用法 您可以通过 data 属

  • jQuery File Upload文件上传插件使用详解

    jQuery File Upload 是一个Jquery文件上传组件,支持多文件上传.取消.删除,上传前缩略图预览.列表显示图片大小,支持上传进度条显示:支持各种动态语言开发的服务器端. 官网链接:https://github.com/blueimp/jQuery-File-Upload/wiki 特点:拖放支持:上传进度条:图像预览:可定制和可扩展的:兼容任何服务器端应用平台(PHP, Python, Ruby on Rails, Java, Node.js, Go etc.). 使用方法:

随机推荐