这篇文章主要为大家详细介绍了伊斯里德手机端图片滑动切换插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
自适应轮播图，支持手机触屏滑动，三种切换效果。
效果图：
js:
var iSlider=function(opts) {
如果(!opts.dom) {
抛出新错误(“dom元素不能为空!");
}
如果(!opts.data ||！opts.data.length) {
抛出新错误("数据必须是数组，并且必须有多个元素!");
}
这个. opts=opts
这个. setting()；
这个. render html()；
这个. bind handler()；
};
是lider。原型。_ setting=function(){
var opts=this ._ opts
这个。wrap=opts。DOM
这个。数据=opts。数据；
这个。type=opts。type | | ' pic
这个。是垂直的=opts。是竖| |假；
这个。幻灯片上=opts。在幻灯片上；
这个。onslidestart=opts。onslidestart
这个。onslideend=opts。onslideend
这个。onslidechange=opts。onslidechange
这个。持续时间=opts。时长| | 4000；
this.log=opts.isDebug？
函数（字符串){
console.log(字符串)
}:函数(){ };
this.axis=this.isVertical？y ':' X '；
这个。宽度=这个。包装。客户端宽度；
这个。身高=这个。包装。客户身高；
这个。比率=这个。身高/这个。宽度；
this.scale=opts.isVertical？这个高度：这个宽度
这个。滑块索引=this。滑块索引| | 0；
if (this.data.length 2) {
this.isLooping=false
this.isAutoPlay=false
}否则{
这个。正在循环=opts。正在循环| | false
这个。isautoplay=opts。isautoplay | | false
}
if (this.isAutoplay) {
这个。play()；
}
这个. setup阻尼()；
这个. animate func=(opts。在此制作文字动画._animateFuncs)？这个. animate funcs[opts。动画类型]:这个. animate funcs[' default ']；
这个. setPlayWhenFocus()；
};
是lider。原型。_ setPlayWhenFocus=function(){
var self=this
window.addEventListener('focus '，
函数(){
自我。我是自娱自乐。play()；
},
假);
window.addEventListener('blur '，
函数(){
自我。pause()；
},
假);
}
是lider。原型。_ animate funcs={
' default': function(dom，axis，scale，I，offset) {
多姆。风格。webkittransform=' translate z(0)translate ' axis '('(offset scale *(I-1))' px)'；
},
旋转':函数(dom，轴，刻度，I，偏移量){
var旋转直接=(axis==' X ')？y ':' X '；
var绝对失调=数学。ABS(偏移)；
var BD color=window。getcomputedstyle(这个。包装。父节点，空).背景颜色
if (this.isVertical) {
偏移量=-偏移量；
}
这个。包装。风格。WebKit perspective=scale * 4；
if (i==1) {
多姆。风格。zindex=scale-绝对偏移量；
}否则{
dom.style.zIndex=(offset 0)？(1-I)*绝对偏移量：(I-1)*绝对偏移量；
}
多姆。风格。背景色=BD color | | ' # 333
多姆。风格。position=' absolute
多姆。风格。WebKit back face visibility=“hidden”；
多姆。风格。webkittransformstyle=' preserve-3d '；
多姆。风格。webkittransform=' rotate ' rotate direct '(' 90 *(offset/scale I-1)' deg)translate z('(0.888 * scale/2)' px)scale(0.888)'；
},
翻转':函数(dom，轴，刻度，I，偏移量){
var旋转直接=(axis==' X ')？y ':' X '；
var BD color=window。getcomputedstyle(这个。包装。父节点，空).背景颜色
if (this.isVertical) {
偏移量=-偏移量；
}
这个。包装。风格。WebKit perspective=scale * 4；
如果(偏移量0) {
dom.style.visibility=(i 1)？"隐藏":"可见";
}否则{
dom.style.visibility=(i 1)？"隐藏":"可见";
}
多姆。风格。背景色=BD color | | ' # 333
多姆。风格。position=' absolute
多姆。风格。WebKit back face visibility=“hidden”；
多姆。风格。webkittransform=' translate z('(scale/2)' px)rotate ' rotate direct '(' 180 *(offset/scale I-1)' deg)scale(0.875)'；
},
' depth': function(dom，axis，scale，I，offset) {
var旋转直接=(axis==' X ')？y ':' X '；
var缩放比例=(4-数学。ABS(I-1))* 0.15；
这个。包装。风格。WebKit perspective=scale * 4；
if (i==1) {
多姆。风格。zindex=100
}否则{
dom.style.zIndex=(offset 0)？(1-I):(I-1)；
}
多姆。风格。webkittransform=' scale(' zoom scale '，' zoom scale ')translate z(0)translate ' axis '('(offset 1.3 * scale *(I-1))' px)'；
},
“撕裂”:函数(dom，轴，刻度，I，偏移量){
var旋转直接=(axis==' X ')？y ':' X '；
var缩放比例=1-(数学。ABS(I-1)* 0.2)；
这个。包装。风格。WebKit perspective=scale * 4；
if (i==1) {
多姆。风格。zindex=100
}否则{
dom.style.zIndex=(offset 0)？(1-I):(I-1)；
}
多姆。风格。webkittransform=' scale(' zoom scale '，' zoom scale ')translate z(0)translate ' axis '('(offset scale *(I-1))' px)'；
}
}
是lider。原型。_ setup damping=function(){
变量二分之一=这个。比例尺1；
var one in 4=one in 2 1；
var 1/16=1/42；
这个。_阻尼=功能（距离){
var dis=Math.abs(距离);
定义变量结果；
if (dis oneIn2) {
结果=dis 1；
} else if (dis oneIn2 oneIn4) {
结果=1/4((dis-1/2)2)；
}否则{
结果=1/4 1/16((dis-1/2-1/4)3)；
}
回程距离0?结果：-结果；
};
};
是lider。原型。_ render item=function(I){
变量项目，html
var len=this。数据。长度；
如果(!this.isLooping) {
item=this.data[i] || {
空：真
};
}否则{
如果(i 0) {
item=this。数据[len I]；
} else if (i len - 1) {
item=this。数据[I-len]；
}否则{
item=this。数据[I]；
}
}
if (item.empty) {
返回"";
}
if (this.type==='pic') {
html=item。高度/项目。加宽这个。比例？img height=' ' this。高度' ' src=' '项目。内容' ':' img width=' ' this。宽度' ' src=' '项目。内容“”；
} else if (this.type==='dom') {
html=' div style=' height:' item。高度'；宽度：'项。宽度'；' '项。content '/div '；
} else if(这个。type===' over spread '){
html=this.ratio 1？div style=' height:100%；宽度：100%;背景：URL(“item . content”)中心不重复；背景-尺寸：'这个。宽度'像素自动；/div ':' div style=' height:100%；宽度：100%;背景：URL(“item . content”)中心不重复；背景尺寸：自动'这个。高度' px；/div '；
}
返回超文本标记语言
};
是lider。原型。_ render html=function(){
定义变量外部；
如果(this.outer) {
这个。外部。innerhtml=
outer=this.outer
}否则{
外部=文档。createelement(“ul”)；
}
外部。风格。宽度=这个。宽度' px '；
外部。风格。身高=这个。高度' px '；
这个。els=[]；
for(var I=0；i3；i ) {
var Li=文档。createelement(“Li”)；
李。风格。宽度=这个。宽度' px '；
李。风格。身高=这个。高度' px '；
这个. animateFunc(李，this.axis，this.scale，I，0)；
（李);
outer.appendChild(李);
如果这是垂直的._ opts。animate type==' rotate ' | | this ._ opts。animate type==' flip '){
li.innerHTML=this ._渲染项目(1-I this。滑块索引)；
}否则{
li.innerHTML=this ._渲染项目(I-1 this。滑块索引)；
}
}
如果(!this.outer) {
外部=外部
这个。包装。appendchild(外部)；
}
};
是lider。原型。_ slide=function(n){
var data=this.data
var els=this.els
var idx=this。滑块索引n；
if (data[idx]) {
this.sliderIndex=idx
}否则{
if (this.isLooping) {
this.sliderIndex=n 0？0:数据。长度-1；
}否则{
n=0；
}
}
这个。log(' pic idx:'这个。滑块索引’)；
var sEle
如果这是垂直的._ opts。animate type==' rotate ' | | this ._ opts。animate type==' flip '){
if (n 0) {
sEle=els。pop()；
埃尔斯。un shift(sEle)；
} else if (n 0) {
sEle=els。shift()；
埃尔斯。推(sEle)；
}
}否则{
if (n 0) {
sEle=els。shift()；
埃尔斯。推(sEle)；
} else if (n 0) {
sEle=els。pop()；
埃尔斯。un shift(sEle)；
}
}
如果(n！==0) {
sEle.innerHTML=this ._ render item(idx n)；
塞勒。风格。webkittransition=' none
塞勒。风格。可见性='隐藏'；
setTimeout(function() {
塞勒。风格。visibility=' visible
},
200);
这个。改变这个。onslidechange(这个。滑块索引)；
}
for(var I=0；i3；i ) {
if (els[i]！==sEle) {
els[I]。风格。webkittransition=' all。3s ease’；
}
这个. animateFunc(els[i]，this.axis，this.scale，I，0)；
}
if (this.isAutoplay) {
如果(这个。滑块索引===数据。长度-1！this.isLooping) {
这个。pause()；
}
}
};
是lider。原型。_ bind handler=function(){
var self=this
var scaleW=self.scaleW
var outer=self.outer
var len=self。数据。长度；
var startHandler=function(evt) {
自我。pause()；
自我。开始自我滑行。onslidestart()；
自我。日志(“事件：幻灯片之前”)；
self.startTime=新日期()。getTime()；
自我。startx=evt。目标触摸[0].pageX
自我。starty=evt。目标触摸[0].佩吉；
var目标=evt.target
while (target.nodeName！='LI' target.nodeName！='BODY') {
target=target.parentNode节点
}
自我目标=目标
};
var moveHandler=function(evt) {
evt。防止默认()；
自我。在幻灯片上。在幻灯片()上；
自我。日志(“幻灯片上的事件”)；
定义变量轴=自轴
var失调=evt。目标触摸[0][' page]轴] - self['start '轴];
如果(!self.isLooping) {
if(偏移量0自。滑块索引===0 | |偏移量0 self。滑块索引===self。数据。长度-1){
偏移=自身。_阻尼（偏移);
}
}
for(var I=0；i3；i ) {
var item=self。els[I]；
item.style.webkitTransition='全0 ';
自我. animateFunc(项目，轴，自缩放，我，偏移);
}
self.offset=偏移量
};
var endHandler=function(evt) {
evt。防止默认()；
var边界=自我。标度/2；
定义变量度量=自我补偿；
var结束时间=新日期()。getTime()；
边界=结束时间-自身。开始时间300？边界：14;
如果(度量=边界){
自我. slide(-1)；
} else if(公制边界){
自我. slide(1)；
}否则{
自我. slide(0)；
}
自我。我是自娱自乐。play()；
自我。偏移=0；
自我。滑向自我。onslideend()；
自我。日志('事件：幻灯片后')；
};
var orientationchangeHandler=function(evt){
setTimeout(function() {
自我。reset()；
自我。日志(“事件：方向改变”)；
},
100);
};
外部。addevent侦听器(' touch start '，start handler)；
外部。addevent侦听器(' touch move '，move handler)；
外部。addevent侦听器(' touch end '，end handler)；
窗户。addevent listener(' orientation change '，方向更改处理程序)；
};
是lider。原型。重置=函数(){
这个。pause()；
这个. setting()；
这个. render html()；
这个。我自动播放这个。play()；
};
是lider。原型。play=function(){
var self=this
var duration=this.duration
clearInterval(这个。autoplaytimer)；
这个。autoplaytimer=setInterval(function(){
自我. slide(1)；
},
持续时间);
};
是lider。原型。暂停=函数(){
clearInterval(这个。autoplaytimer)；
};
是lider。原型。扩展=函数(插件){
var fn=iSlider.prototype
对象.键(插件)。forEach(函数（属性){
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。数据。长度；
var bDrag=false
var mouseStart=function(evt) {
bDrag=true
自我。pause()；
自我。开始自我滑行。onslidestart()；
self.startTime=新日期()。getTime()；
自我。startx=evt。clientx
自我。starty=evt。客户关系；
var目标=evt.target
while (target.nodeName！='LI' target.nodeName！='BODY') {
target=target.parentNode节点
}
自我目标=目标
};
var mouseMove=function(evt) {
if (bDrag) {
evt。防止默认()；
自我。在幻灯片上。在幻灯片()上；
定义变量轴=自轴
var offset=evt['客户端'轴] - self['开始'轴];
如果(!self.isLooping) {
if(偏移量0自。滑块索引===0 | |偏移量0 self。滑块索引===self。数据。长度-1){
偏移=自身。_阻尼（偏移);
}
}
for(var I=0；i3；i ) {
var item=self。els[I]；
item.style.webkitTransition='全0 ';
自我. animateFunc(项目，轴，自缩放，我，偏移);
}
self.offset=偏移量
}
};
var mouseEnd=function(evt) {
evt。防止默认()；
bDrag=false
var边界=自我。标度/2；
定义变量度量=自我补偿；
var结束时间=新日期()。getTime()；
边界=结束时间-自身。开始时间300？边界：14;
如果(度量=边界){
自我. slide(-1)；
} else if(公制边界){
自我. slide(1)；
}否则{
自我. slide(0)；
}
自我。我是自娱自乐。play()；
自我。偏移=0；
自我。滑向自我。onslideend()；
自我。日志('事件：幻灯片后')；
};
外部。addevent侦听器(' mousedown '，mouseStart)；
外部。addevent侦听器(' mouseMove '，mouseMove)；
外部。addevent侦听器(' mouseup '，mouseEnd)；
}
})
html:
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
标题文档/标题
style type='text/css '
*{
填充：0;
列表样式：无；
边距：0;
}
/*容器高度*/
#是ider-effect-wrapper {
高度：400像素
宽度：500像素
边距：0自动；
边距-顶部：4.6雷姆；
溢出：隐藏；
位置：相对；
}。是否有更好的效果
列表样式：无；
填充：0;
边距：0;
身高：100%;
溢出：隐藏
}。更好的效果
位置：绝对；
边距：0;
填充：0;
身高：100%;
溢出：隐藏；
显示：-WebKit-box；
-WebKit-包装盒-包装：中心；
-WebKit-box-align:center；
列表样式：无
}。李的思想影响大吗图像
最大宽度：100%;
最大高度：100%;
边距：0;
填充：0
}。iSlider-effect div {
背景色：# fff
填充物：3px
}
/风格
/头
身体
脚本类型=' text/JavaScript ' src=' mobile _ slider。js '/脚本
！-组件容器-
div id='是ider-effect-wrapper '/div
脚本
//组件注册
var islider1=新iSlider({
//节点获取
DOM:文档。getelementbyid(' is lider-effect-wrapper ')，
//图片配置
数据：[
{
内容：" images/01.jpeg "，
},
{
内容：' images/04.jpg '，
},
{
内容：' images/05.jpg '，
}
],
//播放间隔
时长：3000,
//animateType切换方式
//默认值：默认
//旋转：旋转
//翻转：弹出
动画类型："旋转",
//是否自动播放
isAutoplay:没错，
//是否循环播放
isLooping:没错，
//isVertical: true，是否垂直滚动
});
是lider 1。bind mouse()；
/脚本
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。