移动端左右滑动插件
此插件是基于jQuery的移动端左右滑动插件，支持各移动端浏览器，经过几次修改大致功能已经没有问题，可能有些BUG和值得优化的地方，欢迎纠正和指导（本人邮箱: cymmint@qq.com）。
插件可以设置的参数有：
num: 3, //Wrap内子元素个数, >0
index: 0, //初始化索引值
initX: 10, //X轴滑动大于此属性触发事件 U.px
limitX: 30, //X轴滑动大于此属性触发滑动 U.px
limitY: 70, //Y轴滑动大于些属性禁止滑动 U.px
speed: 300, //滚屏速度, 值越大越慢 U.ms [>=0 && <=1]
edgeSlideVal: 15, //边缘滑动最大距离 U.px [>0]
perSlide: 1, //每次滑动元素数量
slideMode: 1, //滑动模式 [元素:0 || 屏:1 || 自由:2]; 为1时,perSlide失效; 为0时,isSplice失效
freeSlideSpeed: 5, //自由滑动倍速 [>=3]
autoplay: true, //自动滑动时间; slideMode:!2生效; 为false时不自动滑动 U.ms [应大于speed值]
isLoop: false, //是否自动循环; slideMode:1生效; 为true时,isEdgeSlide失效
isEqual: false, //Wrap内子元素是否等宽; 为false时,num、isPerSlideLimit、equalKeepDir 失效
equalKeepDir: "left", //元素等宽时贴靠方向 [left || right || false:不限制]
isSecSlide: true, //isEqual:false && perSlide:1 子元素宽度超出Wrap宽度时是否允许二次滑动
dir: true, //自动循环方向 [true:左 || false:右]
isEdgeSlide: false, //是否允许边缘滑动
isSplice: true, //按屏滑动时,是否前后拼接
isGPURender: true, //是否使用GPU渲染
isPerSlideLimit: true, //每次滑动元素数量是否限制; 为true时,值必须<=num值
isDot: true, //是否显示数量点
isFreeSmooth: true, //自由滑动时,是否流畅滑动
callback: null, //回调函数
beforeSlideCallback: null, //每次滑动开始前调用
afterSlideCallback: null, //每次滑动开始后调用
废话不多说，直接上码。
html { font-size:100px;} body { font-size:12px;} /*mSlide*/ .clr:before, .clr:after { display:block; content:""; clear:both; height:0; visibility:hidden; font-size:0;} .mSlide { width:100%; overflow:hidden;} .mSlide ul { overflow:hidden; opacity:1;} .mSlide ul li { display:block; float:left;} .mSlide ul figure { width:100%; height:100%; background:no-repeat center center; background-size:cover; text-align:center; line-height:2rem; font-size:.3rem; font-weight:bold; color:#f90; text-shadow:-1px 2px 0 rgba(0,0,0,.7);} .mSlide .dot { position:absolute; left:0; bottom:0; width:100%; height:.12rem; text-align:center; line-height:1;} .mSlide .dot i { display:inline-block; width:6px; height:6px; margin:0 .02rem; border-radius:50%; background:rgba(0,0,0,.4); vertical-align:top; line-height:1;} .mSlide .dot i.on { background:rgba(255,255,255,.7);} /*Test*/ .mSlide ul li { width:100px; height:1.5rem;} .mSlide ul li.li2 { width:150px; height:1.5rem;} .mSlide ul li.li3 { width:80px; height:1.5rem;} .mSlide ul li.li4 { width:500px; height:1.5rem;} .mSlide ul li.li6 { width:320px; height:1.5rem;}
<div class="mSlide"> <ul class="clr"> <li><figure style="background-image:url(images/1.jpg);">1</figure></li> <li class="li2"><figure style="background-image:url(images/2.jpg);">2</figure></li> <li class="li3"><figure style="background-image:url(images/3.jpg);">3</figure></li> <li class="li4"><figure style="background-image:url(images/4.jpg);">4</figure></li> <li class="li2"><figure style="background-image:url(images/5.jpg);">5</figure></li> <li><figure style="background-image:url(images/6.jpg);">6</figure></li> <li class="li6"><figure style="background-image:url(images/7.jpg);">7</figure></li> <li class="li3"><figure style="background-image:url(images/8.jpg);">8</figure></li> </ul> </div>
/*** * jQuery plugin mSlide() * Function : 移动端左右滑动mSlide 2 * Version : 2.3 * Author : Cymmint
* Mail : cymmint@qq.com * Date : 2015-08-31 22:10 * Update : 2015-09-07 13:30 * **基本功能*: * 1、按[屏||元素||自由]滑动设置 * 2、边缘滑动、边缘滑动距离设置 * 3、按屏滑动时支持前后拼接 * 4、按元素滑动支持每次滑动数量、是否等宽设置 * 5、按元素滑动时非等宽元素宽度大于Wrap支持同元素多次滑动设置（前提是每次滑动数量为1） * 6、自由滑动 * 7、自由流畅滑动及滑动倍速设置 * 8、支持每次滑动元素数量是否限制 * 9、支持元素等宽时贴靠方向设置 * 10、对应元素位置的数量点标记 * 11、滑动支持使用GPU渲染设置 * 12、自动滑动时方向设置 * 13、自动滑动、自动循环滑动（循环滑动请设置屏滑动，否则将舍弃参数） * 14、CallBack、beforeSlideCallback、afterSlideCallback * **参数说明，及优先级说明*: * 优先级高参数，会强制转换（舍弃）优先级低相关参数值，以实现效果 * [ slideMode > autoplay > isLoop > isSplice > isEdgeSlide ] * [ isEqual > num、equalKeepDir、isPerSlideLimit ] */ ;(function($) { $.fn.mSlide = function(opts) { var define = { num: 3, //Wrap内子元素个数, >0 index: 0, //初始化索引值 initX: 10, //X轴滑动大于此属性触发事件 U.px limitX: 30, //X轴滑动大于此属性触发滑动 U.px limitY: 70, //Y轴滑动大于些属性禁止滑动 U.px speed: 300, //滚屏速度, 值越大越慢 U.ms [>=0 && <=1] edgeSlideVal: 15, //边缘滑动最大距离 U.px [>0] perSlide: 1, //每次滑动元素数量 slideMode: 1, //滑动模式 [元素:0 || 屏:1 || 自由:2]; 为1时,perSlide失效; 为0时,isSplice失效 freeSlideSpeed: 5, //自由滑动倍速 [>=3] autoplay: true, //自动滑动时间; slideMode:!2生效; 为false时不自动滑动 U.ms [应大于speed值] isLoop: false, //是否自动循环; slideMode:1生效; 为true时,isEdgeSlide失效 isEqual: false, //Wrap内子元素是否等宽; 为false时,num、isPerSlideLimit、equalKeepDir 失效 equalKeepDir: "left", //元素等宽时贴靠方向 [left || right || false:不限制] isSecSlide: true, //isEqual:false && perSlide:1 子元素宽度超出Wrap宽度时是否允许二次滑动 dir: true, //自动循环方向 [true:左 || false:右] isEdgeSlide: false, //是否允许边缘滑动 isSplice: true, //按屏滑动时,是否前后拼接 isGPURender: true, //是否使用GPU渲染 isPerSlideLimit: true, //每次滑动元素数量是否限制; 为true时,值必须<=num值 isDot: true, //是否显示数量点 isFreeSmooth: true, //自由滑动时,是否流畅滑动 callback: null, //回调函数 beforeSlideCallback: null, //每次滑动开始前调用 afterSlideCallback: null, //每次滑动结束后调用 }, opts = $.extend({}, define, opts); //配置 var Config = { param: function() { //Wrap内子元素数量 opts.num = isNaN(opts.num) || opts.num < 1 ? 1 : Math.floor(opts.num); //滚屏速度 opts.speed = isNaN(opts.speed) || opts.speed < 0 ? 300 : opts.speed; //边缘滑动距离 opts.edgeSlideVal = isNaN(opts.edgeSlideVal) || opts.edgeSlideVal <= 0 ? 0 : opts.edgeSlideVal; //滑动模式 opts.slideMode = opts.slideMode < 0 || opts.slideMode > 2 || isNaN(opts.slideMode) ? 2 : Math.floor(opts.slideMode); //自动滑动时间 opts.autoplay = opts.slideMode != 2 ? opts.autoplay ? opts.autoplay == true ? 3000 : isNaN(opts.autoplay) || opts.autoplay < opts.speed * 2 ? opts.speed * 2 : opts.autoplay : false : false; //循环滑动 opts.isLoop = opts.autoplay && opts.isLoop && opts.slideMode == 1 ? true : false; //前后拼接 opts.isSplice = opts.slideMode == 1 && opts.isSplice ? true : false; //二次滑动 opts.isSecSlide = opts.isSecSlide && opts.slideMode == 0 && opts.perSlide == 1 ? true : false; //自由滑动倍速 opts.freeSlideSpeed = isNaN(opts.freeSlideSpeed) || opts.freeSlideSpeed < 3 ? 3 : Math.floor(opts.freeSlideSpeed); //边缘滑动 opts.isEdgeSlide = !opts.isLoop && opts.isEdgeSlide ? true : false; //元素等宽时贴靠方向 opts.equalKeepDir = opts.isEqual && opts.equalKeepDir ? opts.equalKeepDir.toLowerCase() == "left" ? "left" : "right" : false; //动画完成事件名 opts.transitionEnd = "transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd msTransitionEnd"; //CSS3前缀 opts.pre = Config.prefix().lowercase; //每次滑动元素数量限制 if(opts.isEqual && opts.isPerSlideLimit) { opts.perSlide = isNaN(opts.perSlide) || opts.perSlide < 1 ? 1 : opts.perSlide > opts.num ? opts.num : Math.floor(opts.perSlide); } }, prefix: function() { //获取CSS3前缀 var styles = window.getComputedStyle(document.documentElement, ""), pre = (Array.prototype.slice.call(styles).join("").match(/-(moz|webkit|ms)-/) || (styles.OLink === "" && ["", "o"]))[1], dom = ("WebKit|Moz|MS|O").match(new RegExp("(" + pre + ")", "i"))[1]; return { dom: dom, lowercase: pre, css: "-" + pre + "-", js: pre[0].toUpperCase() + pre.substr(1) }; }, width: function(Sub) { var aryVal = [], len = Sub.len; for(var i=0; i<len; i++) { if(opts.isEqual) { aryVal.push(Sub.width / opts.num); } else { aryVal.push(Sub.child.eq(i).innerWidth()); } } return aryVal; }, offset: function(Sub) { var aryVal = [], len = Sub.len; for(var i=0; i<len; i++) { aryVal.push(Sub.child.eq(i).offset().left); } return aryVal; }, sum: function(Sub) { var sum = 0, len = Sub.len; if(opts.isEqual) { sum = Sub.width / opts.num * Sub.len; } else { for(var i=0; i<len; i++) { sum += Sub.aryChildWidth[i]; } } return sum; }, leftDup: function(Sub) { var sum = 0, len = Sub.len - 1; for(var i=len; i>=0; i--) { sum += Sub.aryChildWidth[i]; if(sum >= Sub.width) { break; } } len = i; for(i=Sub.len-1; i>=len; i--) { Sub.child.eq(i).clone().addClass("dup").prependTo(Sub.box); } return sum; }, rightDup: function(Sub) { var sum = 0, len = Sub.len; for(var i=0; i<len; i++) { sum += Sub.aryChildWidth[i]; if(sum >= Sub.width) { break; } } len = i; i = Sub.len - 1; for(i=0; i<=len; i++) { Sub.child.eq(i).clone().addClass("dup").appendTo(Sub.box); } return sum; }, edge: function(Sub) { var attr = {}; attr["transitionDuration"] = "0ms"; attr[opts.pre + "TransitionDuration"] = "0ms"; Sub.box.css(attr); if(Sub.edge && Sub.loop) { Methods.translate(Sub, -(Sub.offset + Sub.beforeHideWidth), null); Sub.edge = false; } } }; Config.param(); var Methods = { translate: function(Sub, d, anim, cut) { var anim = anim == null ? "0ms" : isNaN(anim) ? "0.2s" : (anim) + "ms", tran = opts.isGPURender ? "translate3d(" + d + "px, 0, 0)" : "translate(" + d + "px, 0)", attr = {}; attr["transitionDuration"] = anim; attr["transform"] = tran; attr[opts.pre + "TransitionDuration"] = anim; attr[opts.pre + "Transform"] = tran; Sub.box.css(attr); if(cut) { //滑动位置[idx]真正变化 if(typeof opts.beforeSlideCallback == "function") { //动画开始前-回调 opts.beforeSlideCallback.call(); } if(opts.isDot) { //Dot切换 Methods.dotSite(Sub); } } }, dotSite: function(Sub) { var beg = Sub.offset, end = Sub.offset + Sub.width - 1, offset; Sub.dot.removeClass("on"); for(var i=0; i<=Sub.len; i++) { offset = Math.floor(Sub.aryChildOffset[i]); if((offset >= beg && offset <= end) || (offset + Sub.aryChildWidth[i] > beg && offset + Sub.aryChildWidth[i] < end)) { Sub.dot.eq(i).addClass("on"); } } if(!opts.isEqual && Sub.aryChildWidth[Sub.idx] > Sub.width) { Sub.dot.eq(Sub.idx).addClass("on"); } }, offset: function(Sub, dir) { var offset = null, mark = true; if(Sub.offset == null) { //初始 [第一次调用] offset = Sub.aryChildOffset[Sub.idx]; offset = offset >= Sub.maxOffset ? Sub.maxOffset : offset; } else { if(opts.slideMode == 0) { //元素-滑动 if(dir) { //Left if(Math.floor(Sub.offset) < Math.floor(Sub.maxOffset)) { if(opts.isSecSlide && Sub.aryChildWidth[Sub.idx] > Sub.width) { //同子元素二次滑动 if(Sub.offset == Sub.aryChildOffset[Sub.idx] + Sub.aryChildWidth[Sub.idx] - Sub.width) { Sub.idx = Sub.idx + opts.perSlide >= Sub.len - 1 ? Sub.len - 1 : Sub.idx + opts.perSlide; offset = Sub.aryChildOffset[Sub.idx]; } else { if(Sub.aryChildOffset[Sub.idx] + Sub.aryChildWidth[Sub.idx] - Sub.offset <= Sub.width * 2) { offset = Sub.aryChildOffset[Sub.idx] + Sub.aryChildWidth[Sub.idx] - Sub.width; } else { offset = Sub.offset + Sub.width; } } } else { Sub.idx = Sub.idx + opts.perSlide >= Sub.len - 1 ? Sub.len - 1 : Sub.idx + opts.perSlide; if(opts.equalKeepDir == "right") { //元素等宽停靠方向 if(Sub.idx <= opts.num) { offset = Sub.aryChildOffset[Sub.idx]; Sub.keepDir = true; } else { if(Sub.keepDir) { Sub.keepDir = false; Sub.idx = Sub.idx + opts.num - 1 >= Sub.len - 1 ? Sub.len - 1 : Sub.idx + opts.num -1; } offset = Sub.aryChildOffset[Sub.idx] + Sub.aryChildWidth[Sub.idx] - Sub.width; } } else { offset = Sub.aryChildOffset[Sub.idx]; } } offset = offset >= Sub.maxOffset ? Sub.maxOffset : offset; if(offset == Sub.maxOffset) { Sub.idx = Sub.len - 1; } } else { offset = Sub.maxOffset; Sub.idx = Sub.len - 1; Sub.edge = true; mark = false; } } else { //Right if(Sub.offset > 0) { if(opts.isSecSlide && Sub.aryChildWidth[Sub.idx] > Sub.width) { //同子元素二次滑动 if(Sub.offset == Sub.aryChildOffset[Sub.idx]) { Sub.idx = Sub.idx - opts.perSlide <= 0 ? 0 : Sub.idx - opts.perSlide; offset = Sub.aryChildOffset[Sub.idx] + Sub.aryChildWidth[Sub.idx] - Sub.width; } else { if(Sub.offset - Sub.width <= Sub.aryChildOffset[Sub.idx]) { offset = Sub.aryChildOffset[Sub.idx]; } else { offset = Sub.offset - Sub.width; } } } else { Sub.idx = Sub.idx - opts.perSlide <= 0 ? 0 : Sub.idx - opts.perSlide; if(opts.equalKeepDir == "left") { //元素等宽停靠方向 if(Sub.idx >= Sub.len - opts.num) { offset = Sub.aryChildOffset[Sub.idx] + Sub.aryChildWidth[Sub.idx] - Sub.width; Sub.keepDir = true; } else { if(Sub.keepDir) { Sub.keepDir = false; Sub.idx = Sub.idx - opts.num + 1 <= 0 ? 0 : Sub.idx - opts.num + 1; } offset = Sub.aryChildOffset[Sub.idx]; } } else { offset = Sub.aryChildOffset[Sub.idx] + Sub.aryChildWidth[Sub.idx] - Sub.width; } } offset = offset <= 0 ? 0 : offset; if(offset == 0) { Sub.idx = 0; } } else { offset = 0; Sub.idx = 0; Sub.edge = true; mark = false; } } } else if(opts.slideMode == 1) { //屏-滑动 offset = Sub.offset; if(dir) { if(opts.isSplice && Sub.offset >= Sub.maxOffset) { offset = Sub.beforeHideWidth + Sub.maxOffset + Sub.width; Sub.offset = 0; Sub.edge = true; mark = false; } else { offset += Sub.width; offset = offset >= Sub.maxOffset ? Sub.maxOffset : offset; } } else { if(opts.isSplice && Sub.offset <= 0) { offset = Sub.beforeHideWidth - Sub.width; Sub.offset = Sub.maxOffset; Sub.edge = true; mark = false; } else { offset -= Sub.width; offset = offset <= 0 ? 0 : offset; } } if(offset == 0 || offset == Sub.maxOffset) { Sub.edge = true; } } else { //自由-滑动 offset = Sub.curMove; if(offset <= 0 || offset >= Sub.maxOffset) { //边缘 Sub.edge = true; } else { Sub.edge = false; } if(opts.isFreeSmooth && !Sub.edge) { //流畅模式 if(Sub.time < 200) { offset = Sub.offset + (-Sub.dist * opts.freeSlideSpeed); } else if(Sub.time >= 200 && Sub.time < 300) { offset = Sub.offset + (-Sub.dist * 2); } } if(dir) { offset = offset >= Sub.maxOffset ? Sub.maxOffset : offset; } else { offset = offset <= 0 ? 0 : offset; } } } if(mark) { //最终滑动值 Sub.offset = offset; offset = offset + Sub.beforeHideWidth; } return -offset; }, slider: function(_this, Sub) { var X, Y, dX, dY, isChange; _this.on({ "touchstart": function(e) { var ev = e.originalEvent, attr = {}; ev.stopPropagation(); if(Sub.hasOwnProperty("clear")) { //清除自动滑动 clearInterval(Sub.clear); } if (ev.targetTouches.length == 1) { var touch = ev.targetTouches[0]; X = touch.pageX; Y = touch.pageY; dX = dY = 0; Sub.time = (new Date()).getTime(); attr["transitionDuration"] = "0ms"; attr[opts.pre + "TransitionDuration"] = "0ms"; Sub.box.css(attr); } }, "touchmove": function(e) { var ev = e.originalEvent; ev.stopPropagation(); if (ev.targetTouches.length == 1) { var touch = ev.targetTouches[0]; dX = touch.pageX - X; dY = touch.pageY - Y; isChange = true; if(Math.abs(dY) < opts.limitY && Math.abs(dX) > (opts.slideMode == 2 ? 0 : opts.initX)) { var move = Sub.offset - dX / 2; if(opts.isSplice) { //前后拼接 if(dX < 0 && Sub.offset >= Sub.maxOffset) { //Left Sub.edge = true; } else if(dX > 0 && Sub.offset <= 0) { //Right Sub.edge = true; } } else { if(opts.isEdgeSlide) { //边缘滑动 if(dX < 0 && Sub.offset >= Sub.maxOffset) { //Left move = move > Sub.maxOffset + opts.edgeSlideVal ? Sub.maxOffset + opts.edgeSlideVal : move; } else if(dX > 0 && Sub.offset <= 0) { //Right move = -move > opts.edgeSlideVal ? -opts.edgeSlideVal : move; } } else { if(dX < 0 && Sub.offset >= Sub.maxOffset) { //Left move = Sub.maxOffset; isChange = false; } else if(dX > 0 && Sub.offset <= 0) { //Right move = 0; isChange = false; } } } Sub.curMove = move; //当前滑动位置 if(isChange) { Methods.translate(Sub, -(move + Sub.beforeHideWidth), null); } } } }, "touchend": function(e) { var ev = e.originalEvent, offset, speed; ev.stopPropagation(); Sub.time = (new Date()).getTime() - Sub.time; Sub.dist = dX; //每次滑动距离 if(isChange) { if(Math.abs(dY) < opts.limitY && Math.abs(dX) > (opts.slideMode == 2 || Sub.time < 200 ? 0 : opts.limitX)) { if(dX < 0) { //Left offset = Methods.offset(Sub, true); } else { //Right offset = Methods.offset(Sub, false); } speed = opts.speed; if(opts.slideMode == 2 && opts.isFreeSmooth) { if(Sub.time < 200) { speed = opts.speed * 3; } else if(Sub.time >= 200 && Sub.time < 300) { speed = opts.speed * 1.5; } if(Sub.edge) { speed = opts.speed / 2; } } Methods.translate(Sub, offset, speed, true); } else { offset = -(Sub.beforeHideWidth + Sub.offset); Methods.translate(Sub, offset, opts.speed / 2); } } if(Sub.loop || (opts.autoplay && !Sub.edge)) { //自动滑动 Sub.clear = setInterval(function() { Methods.auto(Sub); }, opts.autoplay); } } }); }, auto: function(Sub) { var offset = Methods.offset(Sub, opts.dir); if(!Sub.loop && Sub.edge) { clearInterval(Sub.clear); } else { Methods.translate(Sub, offset, opts.speed, true); } }, main: function(Sub) { var offset = Methods.offset(Sub, true); Methods.translate(Sub, offset, null, true); //滑动 Sub.box.on(opts.transitionEnd, function(){ //重置动画、动画时间 Config.edge(Sub); if(typeof opts.afterSlideCallback == "function") { //动画完成后回调 opts.afterSlideCallback.call(); } }); if(opts.autoplay) { //自动滑动 Sub.clear = setInterval(function() { Methods.auto(Sub); }, opts.autoplay); } }, init: function(_this) { var Sub = {}, htm = ""; Sub.box = _this.find("ul"); Sub.width = _this.innerWidth(); Sub.child = Sub.box.children(); Sub.len = Sub.child.length; Sub.idx = opts.index >= Sub.len ? 0 : opts.index; if(opts.isEqual) { //子元素等宽 Sub.child.css({"width": Sub.width / opts.num}); } Sub.beforeHideWidth = 0; //过渡宽度 Sub.afterHideWidth = 0; Sub.offset = null; //当前偏移 Sub.edge = false; //边缘 Sub.aryChildWidth = Config.width(Sub); //各子元素Width Sub.chlidSumWidth = Config.sum(Sub); Sub.box.css({"width": Sub.chlidSumWidth}); Sub.aryChildOffset = Config.offset(Sub); //各子元素Offset Sub.maxOffset = Sub.chlidSumWidth - Sub.width <= 0 ? 0 : Sub.chlidSumWidth - Sub.width; Sub.loop = opts.isLoop && Sub.chlidSumWidth >= Sub.width; //条件组合是否满足自动循环 if(opts.isSplice) { //前后拼接 Sub.beforeHideWidth = Config.leftDup(Sub);; Sub.afterHideWidth = Config.rightDup(Sub);; Sub.box.css({"width": Sub.chlidSumWidth + Sub.beforeHideWidth + Sub.afterHideWidth}); } if(opts.isDot) { //Dot _this.css({"position": "relative"}); htm = '<div class="dot">'; for(var i=0; i<Sub.len; i++) { htm += '<i></i>'; } htm += '</div>'; _this.append(htm); Sub.dot = _this.find(".dot").children(); } //Run Methods.main(Sub); Methods.slider(_this, Sub); if(typeof opts.callback == "function") { //函数回调 opts.callback.call(); } } }; return this.each(function(i) { Methods.init($(this)); }); } })(jQuery);
$("div.mSlide").mSlide({
num: 1,
index: 0,
perSlide: 1,
edgeSlideVal: 100,
equalKeepDir: false,
isDot: true,
slideMode: "ddd",
isEdgeSlide: true,
isSecSlide: true,
isSplice: false,
isEqual: true,
isDot: true,
isLoop: false,
autoplay: false,
dir: true,
isGPURender: true,
freeSlideSpeed: 6,
isFreeSmooth: true
});
