JS实现滑动插件
本文实例为大家分享了JS实现滑动插件的具体代码，供大家参考，具体内容如下
基本思路是封装一个Slider类，拥有默认初始配置参数。
Slider.prototype(原型链上)拥有实现滑动的方法，通过监听手势，实现滑动的效果。
比较复杂的滑动效果，可以使用Swiper.js来实现。
/*PollyFillforiOS5.**/
if(!Function.prototype.bind){
Function.prototype.bind=function(oThis){
varargs=Array.prototype.slice.call(arguments,1)
varf2bind=this
varfnop=function(){}
varbound=function(){
returnf2bind.apply(thisinstanceoffnop&&oThis
?this
:oThis,
args.concat(Array.prototype.slice.call(arguments)))
}
fnop.prototype=this.prototype
bound.prototype=newfnop()
returnbound
}
}
//添加浏览器前缀
functionprefix(style){
varvendor=(function(){
vartransArr=['transform','webkitTransform','MozTransform','msTranform','OTransform'],
vendors=['','webkit','Moz','ms','O'],
elementStyle=document.createElement('div').style
for(vari=0;i0)||(currentIdx==this._total&&moveDist<0)){
returnthis.slide($current,moveDist/4)
}
leave($current,moveDist)
}
},
_end:function(e){
varmove=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))returnthis._next()
if($prev&&move>triggleDist&&this.hook.shouldGoToPrev($current))returnthis._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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。