From 5839258aaa38f05346b5cbe2c55af35a3f138c3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A5=BF=E9=97=A8?= <1745745@qq.com> Date: Fri, 5 Sep 2014 22:14:38 +0800 Subject: [PATCH 01/16] Initial commit --- README.md | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..f4b2ff9 --- /dev/null +++ b/README.md @@ -0,0 +1,4 @@ +swipeSlide +========== + +移动端轮播图 From e2eafa94565e55f35994d80cde12b9b2a6fabfa9 Mon Sep 17 00:00:00 2001 From: ximan Date: Fri, 5 Sep 2014 22:56:47 +0800 Subject: [PATCH 02/16] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=A1=B9=E7=9B=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + README.md | 12 ++- index.html | 182 +++++++++++++++++++++++++++++++++++++++++++ js/swipeSlide.js | 138 ++++++++++++++++++++++++++++++++ js/swipeSlide.min.js | 6 ++ js/zepto.min.js | 2 + website.png | Bin 0 -> 829 bytes 7 files changed, 338 insertions(+), 3 deletions(-) create mode 100644 .gitignore create mode 100644 index.html create mode 100644 js/swipeSlide.js create mode 100644 js/swipeSlide.min.js create mode 100644 js/zepto.min.js create mode 100644 website.png diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ccc9fd9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*.DS_Store \ No newline at end of file diff --git a/README.md b/README.md index f4b2ff9..345939c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,10 @@ -swipeSlide -========== +#Zepto swipeSlide Plugin -移动端轮播图 +移动端基于Zepto的图片轮播插件: + +![扫一扫](website.png) +手机扫一扫 + +[DEMO](http://ons.me/wp-content/uploads/2014/08/swipeSlide/) + +注:Zepto需要打包Touch模块 \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..c8f2f22 --- /dev/null +++ b/index.html @@ -0,0 +1,182 @@ + + + + swipeSlide + + + + +

西门的后花园

+

Zepto swipeSlide Plugin,移动端基于Zepto的图片轮播插件

+ +
+ +
+ +
+ +
+ +
+ +
+ + + + +
+
+ + + + + + \ No newline at end of file diff --git a/js/swipeSlide.js b/js/swipeSlide.js new file mode 100644 index 0000000..0ab5fa6 --- /dev/null +++ b/js/swipeSlide.js @@ -0,0 +1,138 @@ +/** + * Zepto swipeSlide Plugin + * 西门 http://ons.me/500.html + * 20140905 v1.0 + */ + +;(function($){ + $.fn.swipeSlide = function(options,callback){ + var _index = 0, + _autoSwipe, + $this = $(this), + opts = $.extend({}, { + ul : $this.children('ul'), + li : $this.children().children('li'), + autoSwipe : true, + speed : 4000, + lazyLoad : false + }, options || {}), + _li_length = opts.li.length, + callback = callback || function(){}; + + // 初始化 + (function(){ + // 复制dom + opts.ul.prepend(opts.li.last().clone()).append(opts.li.first().clone()); + fnTranslate(opts.ul.children().first(),-1); + fnTranslate(opts.ul.children().last(),_li_length); + + // 懒加载图片 + if(opts.lazyLoad){ + for(var i=0; i<=2; i++){ + fnLazyLoad(i); + } + } + + // 给初始图片定位 + opts.li.each(function(i){ + fnTranslate($(this),i); + }); + + // 自动滚动 + fnAutoSwipe(); + + // 回调 + callback(_index); + })(); + + // css滚动 + function fnTranslate(dom,i){ + dom.css({ + '-webkit-transform':'translate3d('+i+'00%,0,0)', + 'transform':'translate3d('+i+'00%,0,0)' + }); + } + + // css过度 + function fnTransition(dom,num){ + dom.css({ + '-webkit-transition':'all '+num+'s', + 'transition':'all '+num+'s' + }); + } + + // 懒加载图片 + function fnLazyLoad(index){ + if(opts.lazyLoad){ + var $thisImg = opts.ul.find('img').eq(index); + if($thisImg.attr('data-src')){ + $thisImg.attr('src',$thisImg.attr('data-src')).removeAttr('data-src'); + } + } + } + + // 滚动方法 + function fnScroll(num){ + fnTransition(opts.ul,num); + fnTranslate(opts.ul,-_index); + } + + // 滚动判断 + function fnMove(){ + if(_index >= _li_length){ + fnScroll(.3); + _index = 0; + setTimeout(function(){ + fnScroll(0); + },300); + }else if(_index < 0){ + fnScroll(.3); + _index = _li_length-1; + setTimeout(function(){ + fnScroll(0); + },300); + }else{ + fnScroll(.3); + } + callback(_index); + } + + // 向左滚动 + function fnMoveLeft(){ + _index++; + fnMove(); + if(opts.lazyLoad){ + fnLazyLoad(_index+2); + } + } + + // 向右滚动 + function fnMoveRight(){ + _index--; + fnMove(); + } + + // 自动滚动 + function fnAutoSwipe(){ + if(opts.autoSwipe){ + _autoSwipe = setInterval(function(){ + fnMoveLeft(); + },opts.speed); + } + }; + + // 手动向左滚动 + $this.swipeLeft(function(){ + clearInterval(_autoSwipe); + fnMoveLeft(); + fnAutoSwipe(); + }); + + // 手动向右滚动 + $this.swipeRight(function(){ + clearInterval(_autoSwipe); + fnMoveRight(); + fnAutoSwipe(); + }); + } +})(Zepto); \ No newline at end of file diff --git a/js/swipeSlide.min.js b/js/swipeSlide.min.js new file mode 100644 index 0000000..cc0602a --- /dev/null +++ b/js/swipeSlide.min.js @@ -0,0 +1,6 @@ +/** + * Zepto swipeSlide Plugin + * 西门 http://ons.me/500.html + * 20140905 v1.0 + */ +!function(a){a.fn.swipeSlide=function(b,c){function i(a,b){a.css({"-webkit-transform":"translate3d("+b+"00%,0,0)",transform:"translate3d("+b+"00%,0,0)"})}function j(a,b){a.css({"-webkit-transition":"all "+b+"s",transition:"all "+b+"s"})}function k(a){if(g.lazyLoad){var b=g.ul.find("img").eq(a);b.attr("data-src")&&b.attr("src",b.attr("data-src")).removeAttr("data-src")}}function l(a){j(g.ul,a),i(g.ul,-d)}function m(){d>=h?(l(.3),d=0,setTimeout(function(){l(0)},300)):0>d?(l(.3),d=h-1,setTimeout(function(){l(0)},300)):l(.3),c(d)}function n(){d++,m(),g.lazyLoad&&k(d+2)}function o(){d--,m()}function p(){g.autoSwipe&&(e=setInterval(function(){n()},g.speed))}var e,d=0,f=a(this),g=a.extend({},{ul:f.children("ul"),li:f.children().children("li"),autoSwipe:!0,speed:4e3,lazyLoad:!1},b||{}),h=g.li.length,c=c||function(){};!function(){if(g.ul.prepend(g.li.last().clone()).append(g.li.first().clone()),i(g.ul.children().first(),-1),i(g.ul.children().last(),h),g.lazyLoad)for(var b=0;2>=b;b++)k(b);g.li.each(function(b){i(a(this),b)}),p(),c(d)}(),f.swipeLeft(function(){clearInterval(e),n(),p()}),f.swipeRight(function(){clearInterval(e),o(),p()})}}(Zepto); \ No newline at end of file diff --git a/js/zepto.min.js b/js/zepto.min.js new file mode 100644 index 0000000..88d4adb --- /dev/null +++ b/js/zepto.min.js @@ -0,0 +1,2 @@ +/* Zepto v1.1.4-7-g1d94d92 - zepto event ajax form ie touch - zeptojs.com/license */ +var Zepto=function(){function D(t){return null==t?String(t):T[j.call(t)]||"object"}function L(t){return"function"==D(t)}function A(t){return null!=t&&t==t.window}function _(t){return null!=t&&t.nodeType==t.DOCUMENT_NODE}function Z(t){return"object"==D(t)}function R(t){return Z(t)&&!A(t)&&Object.getPrototypeOf(t)==Object.prototype}function $(t){return"number"==typeof t.length}function k(t){return s.call(t,function(t){return null!=t})}function z(t){return t.length>0?n.fn.concat.apply([],t):t}function F(t){return t.replace(/::/g,"/").replace(/([A-Z]+)([A-Z][a-z])/g,"$1_$2").replace(/([a-z\d])([A-Z])/g,"$1_$2").replace(/_/g,"-").toLowerCase()}function q(t){return t in c?c[t]:c[t]=new RegExp("(^|\\s)"+t+"(\\s|$)")}function H(t,e){return"number"!=typeof e||f[F(t)]?e:e+"px"}function U(t){var e,n;return u[t]||(e=a.createElement(t),a.body.appendChild(e),n=getComputedStyle(e,"").getPropertyValue("display"),e.parentNode.removeChild(e),"none"==n&&(n="block"),u[t]=n),u[t]}function I(t){return"children"in t?o.call(t.children):n.map(t.childNodes,function(t){return 1==t.nodeType?t:void 0})}function X(n,i,r){for(e in i)r&&(R(i[e])||M(i[e]))?(R(i[e])&&!R(n[e])&&(n[e]={}),M(i[e])&&!M(n[e])&&(n[e]=[]),X(n[e],i[e],r)):i[e]!==t&&(n[e]=i[e])}function V(t,e){return null==e?n(t):n(t).filter(e)}function B(t,e,n,i){return L(e)?e.call(t,n,i):e}function Y(t,e,n){null==n?t.removeAttribute(e):t.setAttribute(e,n)}function J(e,n){var i=e.className||"",r=i&&i.baseVal!==t;return n===t?r?i.baseVal:i:void(r?i.baseVal=n:e.className=n)}function G(t){var e;try{return t?"true"==t||("false"==t?!1:"null"==t?null:/^0/.test(t)||isNaN(e=Number(t))?/^[\[\{]/.test(t)?n.parseJSON(t):t:e):t}catch(i){return t}}function W(t,e){e(t);for(var n=0,i=t.childNodes.length;i>n;n++)W(t.childNodes[n],e)}var t,e,n,i,C,N,r=[],o=r.slice,s=r.filter,a=window.document,u={},c={},f={"column-count":1,columns:1,"font-weight":1,"line-height":1,opacity:1,"z-index":1,zoom:1},l=/^\s*<(\w+|!)[^>]*>/,h=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,p=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,d=/^(?:body|html)$/i,m=/([A-Z])/g,g=["val","css","html","text","data","width","height","offset"],v=["after","prepend","before","append"],y=a.createElement("table"),w=a.createElement("tr"),x={tr:a.createElement("tbody"),tbody:y,thead:y,tfoot:y,td:w,th:w,"*":a.createElement("div")},b=/complete|loaded|interactive/,E=/^[\w-]*$/,T={},j=T.toString,S={},P=a.createElement("div"),O={tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},M=Array.isArray||function(t){return t instanceof Array};return S.matches=function(t,e){if(!e||!t||1!==t.nodeType)return!1;var n=t.webkitMatchesSelector||t.mozMatchesSelector||t.oMatchesSelector||t.matchesSelector;if(n)return n.call(t,e);var i,r=t.parentNode,o=!r;return o&&(r=P).appendChild(t),i=~S.qsa(r,e).indexOf(t),o&&P.removeChild(t),i},C=function(t){return t.replace(/-+(.)?/g,function(t,e){return e?e.toUpperCase():""})},N=function(t){return s.call(t,function(e,n){return t.indexOf(e)==n})},S.fragment=function(e,i,r){var s,u,c;return h.test(e)&&(s=n(a.createElement(RegExp.$1))),s||(e.replace&&(e=e.replace(p,"<$1>")),i===t&&(i=l.test(e)&&RegExp.$1),i in x||(i="*"),c=x[i],c.innerHTML=""+e,s=n.each(o.call(c.childNodes),function(){c.removeChild(this)})),R(r)&&(u=n(s),n.each(r,function(t,e){g.indexOf(t)>-1?u[t](e):u.attr(t,e)})),s},S.Z=function(t,e){return t=t||[],t.__proto__=n.fn,t.selector=e||"",t},S.isZ=function(t){return t instanceof S.Z},S.init=function(e,i){var r;if(!e)return S.Z();if("string"==typeof e)if(e=e.trim(),"<"==e[0]&&l.test(e))r=S.fragment(e,RegExp.$1,i),e=null;else{if(i!==t)return n(i).find(e);r=S.qsa(a,e)}else{if(L(e))return n(a).ready(e);if(S.isZ(e))return e;if(M(e))r=k(e);else if(Z(e))r=[e],e=null;else if(l.test(e))r=S.fragment(e.trim(),RegExp.$1,i),e=null;else{if(i!==t)return n(i).find(e);r=S.qsa(a,e)}}return S.Z(r,e)},n=function(t,e){return S.init(t,e)},n.extend=function(t){var e,n=o.call(arguments,1);return"boolean"==typeof t&&(e=t,t=n.shift()),n.forEach(function(n){X(t,n,e)}),t},S.qsa=function(t,e){var n,i="#"==e[0],r=!i&&"."==e[0],s=i||r?e.slice(1):e,a=E.test(s);return _(t)&&a&&i?(n=t.getElementById(s))?[n]:[]:1!==t.nodeType&&9!==t.nodeType?[]:o.call(a&&!i?r?t.getElementsByClassName(s):t.getElementsByTagName(e):t.querySelectorAll(e))},n.contains=a.documentElement.contains?function(t,e){return t!==e&&t.contains(e)}:function(t,e){for(;e&&(e=e.parentNode);)if(e===t)return!0;return!1},n.type=D,n.isFunction=L,n.isWindow=A,n.isArray=M,n.isPlainObject=R,n.isEmptyObject=function(t){var e;for(e in t)return!1;return!0},n.inArray=function(t,e,n){return r.indexOf.call(e,t,n)},n.camelCase=C,n.trim=function(t){return null==t?"":String.prototype.trim.call(t)},n.uuid=0,n.support={},n.expr={},n.map=function(t,e){var n,r,o,i=[];if($(t))for(r=0;r=0?e:e+this.length]},toArray:function(){return this.get()},size:function(){return this.length},remove:function(){return this.each(function(){null!=this.parentNode&&this.parentNode.removeChild(this)})},each:function(t){return r.every.call(this,function(e,n){return t.call(e,n,e)!==!1}),this},filter:function(t){return L(t)?this.not(this.not(t)):n(s.call(this,function(e){return S.matches(e,t)}))},add:function(t,e){return n(N(this.concat(n(t,e))))},is:function(t){return this.length>0&&S.matches(this[0],t)},not:function(e){var i=[];if(L(e)&&e.call!==t)this.each(function(t){e.call(this,t)||i.push(this)});else{var r="string"==typeof e?this.filter(e):$(e)&&L(e.item)?o.call(e):n(e);this.forEach(function(t){r.indexOf(t)<0&&i.push(t)})}return n(i)},has:function(t){return this.filter(function(){return Z(t)?n.contains(this,t):n(this).find(t).size()})},eq:function(t){return-1===t?this.slice(t):this.slice(t,+t+1)},first:function(){var t=this[0];return t&&!Z(t)?t:n(t)},last:function(){var t=this[this.length-1];return t&&!Z(t)?t:n(t)},find:function(t){var e,i=this;return e=t?"object"==typeof t?n(t).filter(function(){var t=this;return r.some.call(i,function(e){return n.contains(e,t)})}):1==this.length?n(S.qsa(this[0],t)):this.map(function(){return S.qsa(this,t)}):[]},closest:function(t,e){var i=this[0],r=!1;for("object"==typeof t&&(r=n(t));i&&!(r?r.indexOf(i)>=0:S.matches(i,t));)i=i!==e&&!_(i)&&i.parentNode;return n(i)},parents:function(t){for(var e=[],i=this;i.length>0;)i=n.map(i,function(t){return(t=t.parentNode)&&!_(t)&&e.indexOf(t)<0?(e.push(t),t):void 0});return V(e,t)},parent:function(t){return V(N(this.pluck("parentNode")),t)},children:function(t){return V(this.map(function(){return I(this)}),t)},contents:function(){return this.map(function(){return o.call(this.childNodes)})},siblings:function(t){return V(this.map(function(t,e){return s.call(I(e.parentNode),function(t){return t!==e})}),t)},empty:function(){return this.each(function(){this.innerHTML=""})},pluck:function(t){return n.map(this,function(e){return e[t]})},show:function(){return this.each(function(){"none"==this.style.display&&(this.style.display=""),"none"==getComputedStyle(this,"").getPropertyValue("display")&&(this.style.display=U(this.nodeName))})},replaceWith:function(t){return this.before(t).remove()},wrap:function(t){var e=L(t);if(this[0]&&!e)var i=n(t).get(0),r=i.parentNode||this.length>1;return this.each(function(o){n(this).wrapAll(e?t.call(this,o):r?i.cloneNode(!0):i)})},wrapAll:function(t){if(this[0]){n(this[0]).before(t=n(t));for(var e;(e=t.children()).length;)t=e.first();n(t).append(this)}return this},wrapInner:function(t){var e=L(t);return this.each(function(i){var r=n(this),o=r.contents(),s=e?t.call(this,i):t;o.length?o.wrapAll(s):r.append(s)})},unwrap:function(){return this.parent().each(function(){n(this).replaceWith(n(this).children())}),this},clone:function(){return this.map(function(){return this.cloneNode(!0)})},hide:function(){return this.css("display","none")},toggle:function(e){return this.each(function(){var i=n(this);(e===t?"none"==i.css("display"):e)?i.show():i.hide()})},prev:function(t){return n(this.pluck("previousElementSibling")).filter(t||"*")},next:function(t){return n(this.pluck("nextElementSibling")).filter(t||"*")},html:function(t){return 0 in arguments?this.each(function(e){var i=this.innerHTML;n(this).empty().append(B(this,t,e,i))}):0 in this?this[0].innerHTML:null},text:function(t){return 0 in arguments?this.each(function(e){var n=B(this,t,e,this.textContent);this.textContent=null==n?"":""+n}):0 in this?this[0].textContent:null},attr:function(n,i){var r;return"string"!=typeof n||1 in arguments?this.each(function(t){if(1===this.nodeType)if(Z(n))for(e in n)Y(this,e,n[e]);else Y(this,n,B(this,i,t,this.getAttribute(n)))}):this.length&&1===this[0].nodeType?!(r=this[0].getAttribute(n))&&n in this[0]?this[0][n]:r:t},removeAttr:function(t){return this.each(function(){1===this.nodeType&&Y(this,t)})},prop:function(t,e){return t=O[t]||t,1 in arguments?this.each(function(n){this[t]=B(this,e,n,this[t])}):this[0]&&this[0][t]},data:function(e,n){var i="data-"+e.replace(m,"-$1").toLowerCase(),r=1 in arguments?this.attr(i,n):this.attr(i);return null!==r?G(r):t},val:function(t){return 0 in arguments?this.each(function(e){this.value=B(this,t,e,this.value)}):this[0]&&(this[0].multiple?n(this[0]).find("option").filter(function(){return this.selected}).pluck("value"):this[0].value)},offset:function(t){if(t)return this.each(function(e){var i=n(this),r=B(this,t,e,i.offset()),o=i.offsetParent().offset(),s={top:r.top-o.top,left:r.left-o.left};"static"==i.css("position")&&(s.position="relative"),i.css(s)});if(!this.length)return null;var e=this[0].getBoundingClientRect();return{left:e.left+window.pageXOffset,top:e.top+window.pageYOffset,width:Math.round(e.width),height:Math.round(e.height)}},css:function(t,i){if(arguments.length<2){var r=this[0],o=getComputedStyle(r,"");if(!r)return;if("string"==typeof t)return r.style[C(t)]||o.getPropertyValue(t);if(M(t)){var s={};return n.each(t,function(t,e){s[e]=r.style[C(e)]||o.getPropertyValue(e)}),s}}var a="";if("string"==D(t))i||0===i?a=F(t)+":"+H(t,i):this.each(function(){this.style.removeProperty(F(t))});else for(e in t)t[e]||0===t[e]?a+=F(e)+":"+H(e,t[e])+";":this.each(function(){this.style.removeProperty(F(e))});return this.each(function(){this.style.cssText+=";"+a})},index:function(t){return t?this.indexOf(n(t)[0]):this.parent().children().indexOf(this[0])},hasClass:function(t){return t?r.some.call(this,function(t){return this.test(J(t))},q(t)):!1},addClass:function(t){return t?this.each(function(e){if("className"in this){i=[];var r=J(this),o=B(this,t,e,r);o.split(/\s+/g).forEach(function(t){n(this).hasClass(t)||i.push(t)},this),i.length&&J(this,r+(r?" ":"")+i.join(" "))}}):this},removeClass:function(e){return this.each(function(n){if("className"in this){if(e===t)return J(this,"");i=J(this),B(this,e,n,i).split(/\s+/g).forEach(function(t){i=i.replace(q(t)," ")}),J(this,i.trim())}})},toggleClass:function(e,i){return e?this.each(function(r){var o=n(this),s=B(this,e,r,J(this));s.split(/\s+/g).forEach(function(e){(i===t?!o.hasClass(e):i)?o.addClass(e):o.removeClass(e)})}):this},scrollTop:function(e){if(this.length){var n="scrollTop"in this[0];return e===t?n?this[0].scrollTop:this[0].pageYOffset:this.each(n?function(){this.scrollTop=e}:function(){this.scrollTo(this.scrollX,e)})}},scrollLeft:function(e){if(this.length){var n="scrollLeft"in this[0];return e===t?n?this[0].scrollLeft:this[0].pageXOffset:this.each(n?function(){this.scrollLeft=e}:function(){this.scrollTo(e,this.scrollY)})}},position:function(){if(this.length){var t=this[0],e=this.offsetParent(),i=this.offset(),r=d.test(e[0].nodeName)?{top:0,left:0}:e.offset();return i.top-=parseFloat(n(t).css("margin-top"))||0,i.left-=parseFloat(n(t).css("margin-left"))||0,r.top+=parseFloat(n(e[0]).css("border-top-width"))||0,r.left+=parseFloat(n(e[0]).css("border-left-width"))||0,{top:i.top-r.top,left:i.left-r.left}}},offsetParent:function(){return this.map(function(){for(var t=this.offsetParent||a.body;t&&!d.test(t.nodeName)&&"static"==n(t).css("position");)t=t.offsetParent;return t})}},n.fn.detach=n.fn.remove,["width","height"].forEach(function(e){var i=e.replace(/./,function(t){return t[0].toUpperCase()});n.fn[e]=function(r){var o,s=this[0];return r===t?A(s)?s["inner"+i]:_(s)?s.documentElement["scroll"+i]:(o=this.offset())&&o[e]:this.each(function(t){s=n(this),s.css(e,B(this,r,t,s[e]()))})}}),v.forEach(function(t,e){var i=e%2;n.fn[t]=function(){var t,o,r=n.map(arguments,function(e){return t=D(e),"object"==t||"array"==t||null==e?e:S.fragment(e)}),s=this.length>1;return r.length<1?this:this.each(function(t,u){o=i?u:u.parentNode,u=0==e?u.nextSibling:1==e?u.firstChild:2==e?u:null;var c=n.contains(a.documentElement,o);r.forEach(function(t){if(s)t=t.cloneNode(!0);else if(!o)return n(t).remove();o.insertBefore(t,u),c&&W(t,function(t){null==t.nodeName||"SCRIPT"!==t.nodeName.toUpperCase()||t.type&&"text/javascript"!==t.type||t.src||window.eval.call(window,t.innerHTML)})})})},n.fn[i?t+"To":"insert"+(e?"Before":"After")]=function(e){return n(e)[t](this),this}}),S.Z.prototype=n.fn,S.uniq=N,S.deserializeValue=G,n.zepto=S,n}();window.Zepto=Zepto,void 0===window.$&&(window.$=Zepto),function(t){function l(t){return t._zid||(t._zid=e++)}function h(t,e,n,i){if(e=p(e),e.ns)var r=d(e.ns);return(s[l(t)]||[]).filter(function(t){return!(!t||e.e&&t.e!=e.e||e.ns&&!r.test(t.ns)||n&&l(t.fn)!==l(n)||i&&t.sel!=i)})}function p(t){var e=(""+t).split(".");return{e:e[0],ns:e.slice(1).sort().join(" ")}}function d(t){return new RegExp("(?:^| )"+t.replace(" "," .* ?")+"(?: |$)")}function m(t,e){return t.del&&!u&&t.e in c||!!e}function g(t){return f[t]||u&&c[t]||t}function v(e,i,r,o,a,u,c){var h=l(e),d=s[h]||(s[h]=[]);i.split(/\s/).forEach(function(i){if("ready"==i)return t(document).ready(r);var s=p(i);s.fn=r,s.sel=a,s.e in f&&(r=function(e){var n=e.relatedTarget;return!n||n!==this&&!t.contains(this,n)?s.fn.apply(this,arguments):void 0}),s.del=u;var l=u||r;s.proxy=function(t){if(t=T(t),!t.isImmediatePropagationStopped()){t.data=o;var i=l.apply(e,t._args==n?[t]:[t].concat(t._args));return i===!1&&(t.preventDefault(),t.stopPropagation()),i}},s.i=d.length,d.push(s),"addEventListener"in e&&e.addEventListener(g(s.e),s.proxy,m(s,c))})}function y(t,e,n,i,r){var o=l(t);(e||"").split(/\s/).forEach(function(e){h(t,e,n,i).forEach(function(e){delete s[o][e.i],"removeEventListener"in t&&t.removeEventListener(g(e.e),e.proxy,m(e,r))})})}function T(e,i){return(i||!e.isDefaultPrevented)&&(i||(i=e),t.each(E,function(t,n){var r=i[t];e[t]=function(){return this[n]=w,r&&r.apply(i,arguments)},e[n]=x}),(i.defaultPrevented!==n?i.defaultPrevented:"returnValue"in i?i.returnValue===!1:i.getPreventDefault&&i.getPreventDefault())&&(e.isDefaultPrevented=w)),e}function j(t){var e,i={originalEvent:t};for(e in t)b.test(e)||t[e]===n||(i[e]=t[e]);return T(i,t)}var n,e=1,i=Array.prototype.slice,r=t.isFunction,o=function(t){return"string"==typeof t},s={},a={},u="onfocusin"in window,c={focus:"focusin",blur:"focusout"},f={mouseenter:"mouseover",mouseleave:"mouseout"};a.click=a.mousedown=a.mouseup=a.mousemove="MouseEvents",t.event={add:v,remove:y},t.proxy=function(e,n){var s=2 in arguments&&i.call(arguments,2);if(r(e)){var a=function(){return e.apply(n,s?s.concat(i.call(arguments)):arguments)};return a._zid=l(e),a}if(o(n))return s?(s.unshift(e[n],e),t.proxy.apply(null,s)):t.proxy(e[n],e);throw new TypeError("expected function")},t.fn.bind=function(t,e,n){return this.on(t,e,n)},t.fn.unbind=function(t,e){return this.off(t,e)},t.fn.one=function(t,e,n,i){return this.on(t,e,n,i,1)};var w=function(){return!0},x=function(){return!1},b=/^([A-Z]|returnValue$|layer[XY]$)/,E={preventDefault:"isDefaultPrevented",stopImmediatePropagation:"isImmediatePropagationStopped",stopPropagation:"isPropagationStopped"};t.fn.delegate=function(t,e,n){return this.on(e,t,n)},t.fn.undelegate=function(t,e,n){return this.off(e,t,n)},t.fn.live=function(e,n){return t(document.body).delegate(this.selector,e,n),this},t.fn.die=function(e,n){return t(document.body).undelegate(this.selector,e,n),this},t.fn.on=function(e,s,a,u,c){var f,l,h=this;return e&&!o(e)?(t.each(e,function(t,e){h.on(t,s,a,e,c)}),h):(o(s)||r(u)||u===!1||(u=a,a=s,s=n),(r(a)||a===!1)&&(u=a,a=n),u===!1&&(u=x),h.each(function(n,r){c&&(f=function(t){return y(r,t.type,u),u.apply(this,arguments)}),s&&(l=function(e){var n,o=t(e.target).closest(s,r).get(0);return o&&o!==r?(n=t.extend(j(e),{currentTarget:o,liveFired:r}),(f||u).apply(o,[n].concat(i.call(arguments,1)))):void 0}),v(r,e,u,a,s,l||f)}))},t.fn.off=function(e,i,s){var a=this;return e&&!o(e)?(t.each(e,function(t,e){a.off(t,i,e)}),a):(o(i)||r(s)||s===!1||(s=i,i=n),s===!1&&(s=x),a.each(function(){y(this,e,s,i)}))},t.fn.trigger=function(e,n){return e=o(e)||t.isPlainObject(e)?t.Event(e):T(e),e._args=n,this.each(function(){"dispatchEvent"in this?this.dispatchEvent(e):t(this).triggerHandler(e,n)})},t.fn.triggerHandler=function(e,n){var i,r;return this.each(function(s,a){i=j(o(e)?t.Event(e):e),i._args=n,i.target=a,t.each(h(a,e.type||e),function(t,e){return r=e.proxy(i),i.isImmediatePropagationStopped()?!1:void 0})}),r},"focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select keydown keypress keyup error".split(" ").forEach(function(e){t.fn[e]=function(t){return t?this.bind(e,t):this.trigger(e)}}),["focus","blur"].forEach(function(e){t.fn[e]=function(t){return t?this.bind(e,t):this.each(function(){try{this[e]()}catch(t){}}),this}}),t.Event=function(t,e){o(t)||(e=t,t=e.type);var n=document.createEvent(a[t]||"Events"),i=!0;if(e)for(var r in e)"bubbles"==r?i=!!e[r]:n[r]=e[r];return n.initEvent(t,i,!0),T(n)}}(Zepto),function(t){function l(e,n,i){var r=t.Event(n);return t(e).trigger(r,i),!r.isDefaultPrevented()}function h(t,e,i,r){return t.global?l(e||n,i,r):void 0}function p(e){e.global&&0===t.active++&&h(e,null,"ajaxStart")}function d(e){e.global&&!--t.active&&h(e,null,"ajaxStop")}function m(t,e){var n=e.context;return e.beforeSend.call(n,t,e)===!1||h(e,n,"ajaxBeforeSend",[t,e])===!1?!1:void h(e,n,"ajaxSend",[t,e])}function g(t,e,n,i){var r=n.context,o="success";n.success.call(r,t,o,e),i&&i.resolveWith(r,[t,o,e]),h(n,r,"ajaxSuccess",[e,n,t]),y(o,e,n)}function v(t,e,n,i,r){var o=i.context;i.error.call(o,n,e,t),r&&r.rejectWith(o,[n,e,t]),h(i,o,"ajaxError",[n,i,t||e]),y(e,n,i)}function y(t,e,n){var i=n.context;n.complete.call(i,e,t),h(n,i,"ajaxComplete",[e,n]),d(n)}function w(){}function x(t){return t&&(t=t.split(";",2)[0]),t&&(t==c?"html":t==u?"json":s.test(t)?"script":a.test(t)&&"xml")||"text"}function b(t,e){return""==e?t:(t+"&"+e).replace(/[&?]{1,2}/,"?")}function E(e){e.processData&&e.data&&"string"!=t.type(e.data)&&(e.data=t.param(e.data,e.traditional)),!e.data||e.type&&"GET"!=e.type.toUpperCase()||(e.url=b(e.url,e.data),e.data=void 0)}function T(e,n,i,r){return t.isFunction(n)&&(r=i,i=n,n=void 0),t.isFunction(i)||(r=i,i=void 0),{url:e,data:n,success:i,dataType:r}}function S(e,n,i,r){var o,s=t.isArray(n),a=t.isPlainObject(n);t.each(n,function(n,u){o=t.type(u),r&&(n=i?r:r+"["+(a||"object"==o||"array"==o?n:"")+"]"),!r&&s?e.add(u.name,u.value):"array"==o||!i&&"object"==o?S(e,u,i,n):e.add(n,u)})}var i,r,e=0,n=window.document,o=/)<[^<]*)*<\/script>/gi,s=/^(?:text|application)\/javascript/i,a=/^(?:text|application)\/xml/i,u="application/json",c="text/html",f=/^\s*$/;t.active=0,t.ajaxJSONP=function(i,r){if(!("type"in i))return t.ajax(i);var c,h,o=i.jsonpCallback,s=(t.isFunction(o)?o():o)||"jsonp"+ ++e,a=n.createElement("script"),u=window[s],f=function(e){t(a).triggerHandler("error",e||"abort")},l={abort:f};return r&&r.promise(l),t(a).on("load error",function(e,n){clearTimeout(h),t(a).off().remove(),"error"!=e.type&&c?g(c[0],l,i,r):v(null,n||"error",l,i,r),window[s]=u,c&&t.isFunction(u)&&u(c[0]),u=c=void 0}),m(l,i)===!1?(f("abort"),l):(window[s]=function(){c=arguments},a.src=i.url.replace(/\?(.+)=\?/,"?$1="+s),n.head.appendChild(a),i.timeout>0&&(h=setTimeout(function(){f("timeout")},i.timeout)),l)},t.ajaxSettings={type:"GET",beforeSend:w,success:w,error:w,complete:w,context:null,global:!0,xhr:function(){return new window.XMLHttpRequest},accepts:{script:"text/javascript, application/javascript, application/x-javascript",json:u,xml:"application/xml, text/xml",html:c,text:"text/plain"},crossDomain:!1,timeout:0,processData:!0,cache:!0},t.ajax=function(e){var n=t.extend({},e||{}),o=t.Deferred&&t.Deferred();for(i in t.ajaxSettings)void 0===n[i]&&(n[i]=t.ajaxSettings[i]);p(n),n.crossDomain||(n.crossDomain=/^([\w-]+:)?\/\/([^\/]+)/.test(n.url)&&RegExp.$2!=window.location.host),n.url||(n.url=window.location.toString()),E(n);var s=n.dataType,a=/\?.+=\?/.test(n.url);if(a&&(s="jsonp"),n.cache!==!1&&(e&&e.cache===!0||"script"!=s&&"jsonp"!=s)||(n.url=b(n.url,"_="+Date.now())),"jsonp"==s)return a||(n.url=b(n.url,n.jsonp?n.jsonp+"=?":n.jsonp===!1?"":"callback=?")),t.ajaxJSONP(n,o);var T,u=n.accepts[s],c={},l=function(t,e){c[t.toLowerCase()]=[t,e]},h=/^([\w-]+:)\/\//.test(n.url)?RegExp.$1:window.location.protocol,d=n.xhr(),y=d.setRequestHeader;if(o&&o.promise(d),n.crossDomain||l("X-Requested-With","XMLHttpRequest"),l("Accept",u||"*/*"),(u=n.mimeType||u)&&(u.indexOf(",")>-1&&(u=u.split(",",2)[0]),d.overrideMimeType&&d.overrideMimeType(u)),(n.contentType||n.contentType!==!1&&n.data&&"GET"!=n.type.toUpperCase())&&l("Content-Type",n.contentType||"application/x-www-form-urlencoded"),n.headers)for(r in n.headers)l(r,n.headers[r]);if(d.setRequestHeader=l,d.onreadystatechange=function(){if(4==d.readyState){d.onreadystatechange=w,clearTimeout(T);var e,i=!1;if(d.status>=200&&d.status<300||304==d.status||0==d.status&&"file:"==h){s=s||x(n.mimeType||d.getResponseHeader("content-type")),e=d.responseText;try{"script"==s?(1,eval)(e):"xml"==s?e=d.responseXML:"json"==s&&(e=f.test(e)?null:t.parseJSON(e))}catch(r){i=r}i?v(i,"parsererror",d,n,o):g(e,d,n,o)}else v(d.statusText||null,d.status?"error":"abort",d,n,o)}},m(d,n)===!1)return d.abort(),v(null,"abort",d,n,o),d;if(n.xhrFields)for(r in n.xhrFields)d[r]=n.xhrFields[r];var j="async"in n?n.async:!0;d.open(n.type,n.url,j,n.username,n.password);for(r in c)y.apply(d,c[r]);return n.timeout>0&&(T=setTimeout(function(){d.onreadystatechange=w,d.abort(),v(null,"timeout",d,n,o)},n.timeout)),d.send(n.data?n.data:null),d},t.get=function(){return t.ajax(T.apply(null,arguments))},t.post=function(){var e=T.apply(null,arguments);return e.type="POST",t.ajax(e)},t.getJSON=function(){var e=T.apply(null,arguments);return e.dataType="json",t.ajax(e)},t.fn.load=function(e,n,i){if(!this.length)return this;var a,r=this,s=e.split(/\s/),u=T(e,n,i),c=u.success;return s.length>1&&(u.url=s[0],a=s[1]),u.success=function(e){r.html(a?t("
").html(e.replace(o,"")).find(a):e),c&&c.apply(r,arguments)},t.ajax(u),this};var j=encodeURIComponent;t.param=function(t,e){var n=[];return n.add=function(t,e){this.push(j(t)+"="+j(e))},S(n,t,e),n.join("&").replace(/%20/g,"+")}}(Zepto),function(t){t.fn.serializeArray=function(){var e,n,i=[];return t([].slice.call(this.get(0).elements)).each(function(){e=t(this),n=e.attr("type"),"fieldset"!=this.nodeName.toLowerCase()&&!this.disabled&&"submit"!=n&&"reset"!=n&&"button"!=n&&("radio"!=n&&"checkbox"!=n||this.checked)&&i.push({name:e.attr("name"),value:e.val()})}),i},t.fn.serialize=function(){var t=[];return this.serializeArray().forEach(function(e){t.push(encodeURIComponent(e.name)+"="+encodeURIComponent(e.value))}),t.join("&")},t.fn.submit=function(e){if(e)this.bind("submit",e);else if(this.length){var n=t.Event("submit");this.eq(0).trigger(n),n.isDefaultPrevented()||this.get(0).submit()}return this}}(Zepto),function(t){"__proto__"in{}||t.extend(t.zepto,{Z:function(e,n){return e=e||[],t.extend(e,t.fn),e.selector=n||"",e.__Z=!0,e},isZ:function(e){return"array"===t.type(e)&&"__Z"in e}});try{getComputedStyle(void 0)}catch(e){var n=getComputedStyle;window.getComputedStyle=function(t){try{return n(t)}catch(e){return null}}}}(Zepto),function(t){function u(t,e,n,i){return Math.abs(t-e)>=Math.abs(n-i)?t-e>0?"Left":"Right":n-i>0?"Up":"Down"}function c(){o=null,e.last&&(e.el.trigger("longTap"),e={})}function f(){o&&clearTimeout(o),o=null}function l(){n&&clearTimeout(n),i&&clearTimeout(i),r&&clearTimeout(r),o&&clearTimeout(o),n=i=r=o=null,e={}}function h(t){return("touch"==t.pointerType||t.pointerType==t.MSPOINTER_TYPE_TOUCH)&&t.isPrimary}function p(t,e){return t.type=="pointer"+e||t.type.toLowerCase()=="mspointer"+e}var n,i,r,o,a,e={},s=750;t(document).ready(function(){var d,m,y,w,g=0,v=0;"MSGesture"in window&&(a=new MSGesture,a.target=document.body),t(document).bind("MSGestureEnd",function(t){var n=t.velocityX>1?"Right":t.velocityX<-1?"Left":t.velocityY>1?"Down":t.velocityY<-1?"Up":null;n&&(e.el.trigger("swipe"),e.el.trigger("swipe"+n))}).on("touchstart MSPointerDown pointerdown",function(i){(!(w=p(i,"down"))||h(i))&&(y=w?i:i.touches[0],i.touches&&1===i.touches.length&&e.x2&&(e.x2=void 0,e.y2=void 0),d=Date.now(),m=d-(e.last||d),e.el=t("tagName"in y.target?y.target:y.target.parentNode),n&&clearTimeout(n),e.x1=y.pageX,e.y1=y.pageY,m>0&&250>=m&&(e.isDoubleTap=!0),e.last=d,o=setTimeout(c,s),a&&w&&a.addPointer(i.pointerId))}).on("touchmove MSPointerMove pointermove",function(t){(!(w=p(t,"move"))||h(t))&&(y=w?t:t.touches[0],f(),e.x2=y.pageX,e.y2=y.pageY,g+=Math.abs(e.x1-e.x2),v+=Math.abs(e.y1-e.y2))}).on("touchend MSPointerUp pointerup",function(o){(!(w=p(o,"up"))||h(o))&&(f(),e.x2&&Math.abs(e.x1-e.x2)>30||e.y2&&Math.abs(e.y1-e.y2)>30?r=setTimeout(function(){e.el.trigger("swipe"),e.el.trigger("swipe"+u(e.x1,e.x2,e.y1,e.y2)),e={}},0):"last"in e&&(30>g&&30>v?i=setTimeout(function(){var i=t.Event("tap");i.cancelTouch=l,e.el.trigger(i),e.isDoubleTap?(e.el&&e.el.trigger("doubleTap"),e={}):n=setTimeout(function(){n=null,e.el&&e.el.trigger("singleTap"),e={}},250)},0):e={}),g=v=0)}).on("touchcancel MSPointerCancel pointercancel",l),t(window).on("scroll",l)}),["swipe","swipeLeft","swipeRight","swipeUp","swipeDown","doubleTap","tap","singleTap","longTap"].forEach(function(e){t.fn[e]=function(t){return this.on(e,t)}})}(Zepto); \ No newline at end of file diff --git a/website.png b/website.png new file mode 100644 index 0000000000000000000000000000000000000000..d2efdc4af8b2c4520e8051921a07613ea4483fde GIT binary patch literal 829 zcmV-D1H$}?P)QV{44bRsk&(zZN6>6 zW;}*c{;pqm`54_tx6w*19)X+j_5TQds&|iZlZqdYUP}eBRx7@E?GwiU`0t_78t?i| ziZ=u4gIEj&grnyD`D2Q(osLv1~^2Q+o+K;cBKs9(4Pe7$d#H49{ zr{#IXqv!A&Dur+iQO5yUwUcVo-KtYmo6X`Hm?qyBx^u~5n~dseX?rw9%rsxrEZvE&W>fr&u!w@>T4WWT(L{>n41hD)n86Y zmQW5x(_ZoLS&CGSMcwDrb_vI5vqm}ABt`BX5Qh2)WEv;LudK!N?CEbHc*wJ5Wh&}E zVH`n~$l>(%nNd!Qi&=|a-p+{Hn<8o1Qdga#7SOWf-^VF@s25WwR!)~jcSsgz^E4z^L!AVJn=D>d#kHLx-67I}j3?jJ<3&QmatV(K z4OAw#t`%u$Ik}d(b%_I_F0Rg?Uiat=e706)0x3sIuA18-*>)5aSCE0Nxly9bK&Szu z=4_w%$SlTEH@xB^#U_!?~(Q-p0(yG~ObWI_GBZocJmo z9v$A-M+YOGFS^`hm)sjsS%J Date: Tue, 30 Sep 2014 19:56:40 +0800 Subject: [PATCH 03/16] =?UTF-8?q?=E6=9B=B4=E6=96=B0v1.1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 16 +++++- index.html | 17 ++++-- js/jquery.min.js | 4 ++ js/swipeSlide.js | 131 ++++++++++++++++++++++++++++++++----------- js/swipeSlide.min.js | 4 +- js/zepto.min.js | 4 +- 6 files changed, 131 insertions(+), 45 deletions(-) create mode 100644 js/jquery.min.js diff --git a/README.md b/README.md index 345939c..ca09d6e 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,20 @@ -#Zepto swipeSlide Plugin +# swipeSlide for Zepto/jQuery Plugin -移动端基于Zepto的图片轮播插件: +移动端(基于Zepto/jQuery)的图片轮播插件: ![扫一扫](website.png) 手机扫一扫 [DEMO](http://ons.me/wp-content/uploads/2014/08/swipeSlide/) -注:Zepto需要打包Touch模块 \ No newline at end of file +### v1.1: + +* 支持Zepto精简版或jQuery 2.x库,去掉Zepto Touch模块依赖 +* 支持图片跟手滑动 +* 改善部分Android浏览器滑动卡顿 + +### v1.0: + +* 支持自动或手动切换 +* 支持改变切换速度 +* 支持图片懒加载 \ No newline at end of file diff --git a/index.html b/index.html index c8f2f22..abf60b7 100644 --- a/index.html +++ b/index.html @@ -12,10 +12,17 @@ /* 缩放网页,文字大小不变 */ -webkit-text-size-adjust:none; } +h1{ + font-size: 16px; +} +h2{ + font-size: 14px; +} .slide{ position: relative; + max-width: 640px; overflow: hidden; - margin-bottom: 10px; + margin: 10px auto; } .slide:after{ content: ''; @@ -44,6 +51,7 @@ top: 0; width: 100%; height: 100%; + border: none; } .slide .dot{ position: absolute; @@ -96,17 +104,17 @@

Zepto swipeSlide Plugin, + + + + + + \ No newline at end of file diff --git a/full-screen-text.html b/full-screen-text.html new file mode 100644 index 0000000..c072f47 --- /dev/null +++ b/full-screen-text.html @@ -0,0 +1,124 @@ + + + + swipeSlide + + + + +

西门的后花园

+

swipeSlide for Zepto/jQuery Plugin,移动端(基于Zepto/jQuery)的轮播插件

+ +
+
    +
  • +

    第一个的标题

    +
  • +
  • +

    第二个的标题

    +
  • +
  • +

    第三个的标题

    +
  • +
  • +

    第四个的标题

    +
  • +
  • +

    第五个的标题

    +
  • +
+
+ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index abf60b7..4a6255e 100644 --- a/index.html +++ b/index.html @@ -70,12 +70,11 @@ .slide .dot .cur{ background-color: #fff; } -

西门的后花园

-

Zepto swipeSlide Plugin,移动端基于Zepto的图片轮播插件

+

swipeSlide for Zepto/jQuery Plugin,移动端(基于Zepto/jQuery)的轮播插件

+ + diff --git a/js/swipeSlide.js b/js/swipeSlide.js index df692aa..775657d 100644 --- a/js/swipeSlide.js +++ b/js/swipeSlide.js @@ -2,7 +2,7 @@ * swipeSlide * http://ons.me/500.html * 西门 - * 3.0(150227) + * 3.1.0(150313) */ ;(function(win,$){ 'use strict'; @@ -35,7 +35,7 @@ // 绑定swipeSlide $.fn.swipeSlide = function(options){ - new sS(this, options); + return new sS(this, options); }; var sS = function(element, options){ var me = this; @@ -158,13 +158,16 @@ var $li = me.opts.ul.children(); var $thisImg = $li.eq(index).find('[data-src]'); if($thisImg){ - if($thisImg.is('img')){ - $thisImg.attr('src',$thisImg.data('src')); - $thisImg.removeAttr('data-src'); - }else{ - $thisImg.css({'background-image':'url('+$thisImg.data('src')+')'}); - $thisImg.removeAttr('data-src'); - } + $thisImg.each(function(i){ + var $this = $(this); + if($this.is('img')){ + $this.attr('src',$this.data('src')); + $this.removeAttr('data-src'); + }else{ + $this.css({'background-image':'url('+$this.data('src')+')'}); + $this.removeAttr('data-src'); + } + }); } } @@ -235,7 +238,6 @@ fnSlide(me, 'next', '.3'); } } - me.fnAutoSlide(); me._moveDistance = me._moveDistanceIE = 0; } @@ -249,27 +251,51 @@ } }; + // 指定轮播 + sS.prototype.goTo = function(i){ + var me = this; + fnSlide(me, i, '.3'); + }; + // 轮播方法 - function fnSlide(me, direction, num){ + function fnSlide(me, go, num){ // 判断方向 - if(direction == 'next'){ - me._index++; + if(typeof go === 'number'){ + me._index = go; + // 加载当前屏、前一屏、后一屏 if(me.opts.lazyLoad){ // 因为连续滚动,复制dom,所以要多加1 + if(me.opts.continuousScroll){ + fnLazyLoad(me, me._index); + fnLazyLoad(me, me._index+1); + fnLazyLoad(me, me._index+2); + }else{ + fnLazyLoad(me, me._index-1); + fnLazyLoad(me, me._index); + fnLazyLoad(me, me._index+1); + } + } + }else if(go == 'next'){ + me._index++; + if(me.opts.lazyLoad){ if(me.opts.continuousScroll){ fnLazyLoad(me, me._index+2); }else{ fnLazyLoad(me, me._index+1); } } - }else if(direction == 'prev'){ + }else if(go == 'prev'){ me._index--; - // 往上滚动比较特殊,只有连续滚动&&懒加载时才有 - if(me.opts.lazyLoad && me.opts.continuousScroll){ + if(me.opts.lazyLoad){ + // 往前到最后一屏,加载最后一屏前一屏 if(me._index < 0){ fnLazyLoad(me, me._liLength-1); }else{ - fnLazyLoad(me, me._index); + if(me.opts.continuousScroll){ + fnLazyLoad(me, me._index); + }else{ + fnLazyLoad(me, me._index-1); + } } } } @@ -299,12 +325,15 @@ fnScroll(me, num); } me.opts.callback(me._index); + me.fnAutoSlide(); } // 轮播动作 function fnScroll(me, num){ fnTransition(me, me.opts.ul, num); fnTranslate(me, me.opts.ul, -me._index*me._slideDistance); + // 清除autoSlide自动轮播方法 + clearInterval(me.autoSlide); } })(window, window.Zepto || window.jQuery); \ No newline at end of file diff --git a/js/swipeSlide.min.js b/js/swipeSlide.min.js index 2c29c8c..cb2cbeb 100644 --- a/js/swipeSlide.min.js +++ b/js/swipeSlide.min.js @@ -2,6 +2,6 @@ * swipeSlide * http://ons.me/500.html * 西门 - * 3.0(150227) + * 3.1.0(150313) */ -!function(a,b){"use strict";function h(a,b,c){b.css({"-webkit-transition":"all "+c+"s "+a.opts.transitionType,transition:"all "+c+"s "+a.opts.transitionType})}function i(a,b,c){var d=a.opts.axisX?c+"px,0,0":"0,"+c+"px,0";b.css({"-webkit-transform":"translate3d("+d+")",transform:"translate3d("+d+")"})}function j(a,b){var c=a.opts.ul.children(),d=c.eq(b).find("[data-src]");d&&(d.is("img")?(d.attr("src",d.data("src")),d.removeAttr("data-src")):(d.css({"background-image":"url("+d.data("src")+")"}),d.removeAttr("data-src")))}function k(a){e.touch&&!a.touches&&(a.touches=a.originalEvent.touches)}function l(a,b){b._startX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._startY=e.touch?a.touches[0].pageY:a.pageY||a.clientY}function m(a,b){a.preventDefault?a.preventDefault():a.returnValue=!1,b.opts.autoSwipe&&clearInterval(b.autoSlide),b.allowSlideClick=!1,b._curX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._curY=e.touch?a.touches[0].pageY:a.pageY||a.clientY,b._moveX=b._moveX_ie=b._curX-b._startX,b._moveY=b._moveY_ie=b._curY-b._startY,h(b,b.opts.ul,0),b._moveDistance=b._moveDistanceIE=b.opts.axisX?b._moveX:b._moveY,b.opts.continuousScroll||(0==b._index&&b._moveDistance>0||b._index+1>=b._liLength&&b._moveDistance<0)&&(b._moveDistance=0),i(b,b.opts.ul,-(b._slideDistance*b._index-b._moveDistance))}function n(a){(c.ie10||c.ie11)&&(Math.abs(a._moveDistanceIE)<5&&(a.allowSlideClick=!0),setTimeout(function(){a.allowSlideClick=!0},100)),Math.abs(a._moveDistance)<=a._distance?o(a,"",".3"):a._moveDistance>a._distance?o(a,"prev",".3"):o(a,"next",".3"),a.fnAutoSlide(),a._moveDistance=a._moveDistanceIE=0}function o(a,b,c){"next"==b?(a._index++,a.opts.lazyLoad&&(a.opts.continuousScroll?j(a,a._index+2):j(a,a._index+1))):"prev"==b&&(a._index--,a.opts.lazyLoad&&a.opts.continuousScroll&&(a._index<0?j(a,a._liLength-1):j(a,a._index))),a.opts.continuousScroll?a._index>=a._liLength?(p(a,c),a._index=0,setTimeout(function(){p(a,0)},300)):a._index<0?(p(a,c),a._index=a._liLength-1,setTimeout(function(){p(a,0)},300)):p(a,c):(a._index>=a._liLength?a._index=0:a._index<0&&(a._index=a._liLength-1),p(a,c)),a.opts.callback(a._index)}function p(a,b){h(a,a.opts.ul,b),i(a,a.opts.ul,-a._index*a._slideDistance)}var f,g,c={ie10:a.navigator.msPointerEnabled,ie11:a.navigator.pointerEnabled},d=["touchstart","touchmove","touchend"],e={touch:a.Modernizr&&Modernizr.touch===!0||function(){return!!("ontouchstart"in a||a.DocumentTouch&&document instanceof DocumentTouch)}()};c.ie10&&(d=["MSPointerDown","MSPointerMove","MSPointerUp"]),c.ie11&&(d=["pointerdown","pointermove","pointerup"]),f={touchStart:d[0],touchMove:d[1],touchEnd:d[2]},b.fn.swipeSlide=function(a){new g(this,a)},g=function(a,c){var d=this;d.$el=b(a),d._index=0,d._distance=50,d.allowSlideClick=!0,d.init(c)},g.prototype.init=function(d){function o(){var c,a=e.opts.ul.children();e._slideDistance=e.opts.axisX?e.opts.li.width():e.opts.li.height(),h(e,e.opts.ul,0),i(e,e.opts.ul,-e._slideDistance*e._index),h(e,a,0),c=e.opts.continuousScroll?-1:0,a.each(function(a){i(e,b(this),e._slideDistance*(a+c))})}var g,e=this;return e.opts=b.extend({},{ul:e.$el.children("ul"),li:e.$el.children().children("li"),continuousScroll:!1,autoSwipe:!0,speed:4e3,axisX:!0,transitionType:"ease",lazyLoad:!1,callback:function(){}},d),e._liLength=e.opts.li.length,e._liLength<=1?!1:(e.opts.lazyLoad&&(j(e,"0"),j(e,"1"),e.opts.continuousScroll&&j(e,e._liLength-1)),e.opts.continuousScroll&&e.opts.ul.prepend(e.opts.li.last().clone()).append(e.opts.li.first().clone()),o(),(c.ie10||c.ie11)&&(g="",g=e.opts.axisX?"pan-y":"none",e.$el.css({"-ms-touch-action":g,"touch-action":g}),e.$el.on("click",function(){return e.allowSlideClick})),e.fnAutoSlide(),e.opts.callback(e._index),e.$el.on(f.touchStart,function(a){k(a),l(a,e)}),e.$el.on(f.touchMove,function(a){k(a),m(a,e)}),e.$el.on(f.touchEnd,function(){n(e)}),b(a).on("onorientationchange"in a?"orientationchange":"resize",function(){clearTimeout(e.timer),e.timer=setTimeout(o,150)}),void 0)},g.prototype.fnAutoSlide=function(){var a=this;a.opts.autoSwipe&&(a.autoSlide=setInterval(function(){o(a,"next",".3")},a.opts.speed))}}(window,window.Zepto||window.jQuery); \ No newline at end of file +!function(a,b){"use strict";function h(a,b,c){b.css({"-webkit-transition":"all "+c+"s "+a.opts.transitionType,transition:"all "+c+"s "+a.opts.transitionType})}function i(a,b,c){var d=a.opts.axisX?c+"px,0,0":"0,"+c+"px,0";b.css({"-webkit-transform":"translate3d("+d+")",transform:"translate3d("+d+")"})}function j(a,c){var d=a.opts.ul.children(),e=d.eq(c).find("[data-src]");e&&e.each(function(){var c=b(this);c.is("img")?(c.attr("src",c.data("src")),c.removeAttr("data-src")):(c.css({"background-image":"url("+c.data("src")+")"}),c.removeAttr("data-src"))})}function k(a){e.touch&&!a.touches&&(a.touches=a.originalEvent.touches)}function l(a,b){b._startX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._startY=e.touch?a.touches[0].pageY:a.pageY||a.clientY}function m(a,b){a.preventDefault?a.preventDefault():a.returnValue=!1,b.opts.autoSwipe&&clearInterval(b.autoSlide),b.allowSlideClick=!1,b._curX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._curY=e.touch?a.touches[0].pageY:a.pageY||a.clientY,b._moveX=b._moveX_ie=b._curX-b._startX,b._moveY=b._moveY_ie=b._curY-b._startY,h(b,b.opts.ul,0),b._moveDistance=b._moveDistanceIE=b.opts.axisX?b._moveX:b._moveY,b.opts.continuousScroll||(0==b._index&&b._moveDistance>0||b._index+1>=b._liLength&&b._moveDistance<0)&&(b._moveDistance=0),i(b,b.opts.ul,-(b._slideDistance*b._index-b._moveDistance))}function n(a){(c.ie10||c.ie11)&&(Math.abs(a._moveDistanceIE)<5&&(a.allowSlideClick=!0),setTimeout(function(){a.allowSlideClick=!0},100)),Math.abs(a._moveDistance)<=a._distance?o(a,"",".3"):a._moveDistance>a._distance?o(a,"prev",".3"):o(a,"next",".3"),a._moveDistance=a._moveDistanceIE=0}function o(a,b,c){"number"==typeof b?(a._index=b,a.opts.lazyLoad&&(a.opts.continuousScroll?(j(a,a._index),j(a,a._index+1),j(a,a._index+2)):(j(a,a._index-1),j(a,a._index),j(a,a._index+1)))):"next"==b?(a._index++,a.opts.lazyLoad&&(a.opts.continuousScroll?j(a,a._index+2):j(a,a._index+1))):"prev"==b&&(a._index--,a.opts.lazyLoad&&(a._index<0?j(a,a._liLength-1):a.opts.continuousScroll?j(a,a._index):j(a,a._index-1))),a.opts.continuousScroll?a._index>=a._liLength?(p(a,c),a._index=0,setTimeout(function(){p(a,0)},300)):a._index<0?(p(a,c),a._index=a._liLength-1,setTimeout(function(){p(a,0)},300)):p(a,c):(a._index>=a._liLength?a._index=0:a._index<0&&(a._index=a._liLength-1),p(a,c)),a.opts.callback(a._index),a.fnAutoSlide()}function p(a,b){h(a,a.opts.ul,b),i(a,a.opts.ul,-a._index*a._slideDistance),clearInterval(a.autoSlide)}var f,g,c={ie10:a.navigator.msPointerEnabled,ie11:a.navigator.pointerEnabled},d=["touchstart","touchmove","touchend"],e={touch:a.Modernizr&&Modernizr.touch===!0||function(){return!!("ontouchstart"in a||a.DocumentTouch&&document instanceof DocumentTouch)}()};c.ie10&&(d=["MSPointerDown","MSPointerMove","MSPointerUp"]),c.ie11&&(d=["pointerdown","pointermove","pointerup"]),f={touchStart:d[0],touchMove:d[1],touchEnd:d[2]},b.fn.swipeSlide=function(a){return new g(this,a)},g=function(a,c){var d=this;d.$el=b(a),d._index=0,d._distance=50,d.allowSlideClick=!0,d.init(c)},g.prototype.init=function(d){function o(){var c,a=e.opts.ul.children();e._slideDistance=e.opts.axisX?e.opts.li.width():e.opts.li.height(),h(e,e.opts.ul,0),i(e,e.opts.ul,-e._slideDistance*e._index),h(e,a,0),c=e.opts.continuousScroll?-1:0,a.each(function(a){i(e,b(this),e._slideDistance*(a+c))})}var g,e=this;return e.opts=b.extend({},{ul:e.$el.children("ul"),li:e.$el.children().children("li"),continuousScroll:!1,autoSwipe:!0,speed:4e3,axisX:!0,transitionType:"ease",lazyLoad:!1,callback:function(){}},d),e._liLength=e.opts.li.length,e._liLength<=1?!1:(e.opts.lazyLoad&&(j(e,"0"),j(e,"1"),e.opts.continuousScroll&&j(e,e._liLength-1)),e.opts.continuousScroll&&e.opts.ul.prepend(e.opts.li.last().clone()).append(e.opts.li.first().clone()),o(),(c.ie10||c.ie11)&&(g="",g=e.opts.axisX?"pan-y":"none",e.$el.css({"-ms-touch-action":g,"touch-action":g}),e.$el.on("click",function(){return e.allowSlideClick})),e.fnAutoSlide(),e.opts.callback(e._index),e.$el.on(f.touchStart,function(a){k(a),l(a,e)}),e.$el.on(f.touchMove,function(a){k(a),m(a,e)}),e.$el.on(f.touchEnd,function(){n(e)}),b(a).on("onorientationchange"in a?"orientationchange":"resize",function(){clearTimeout(e.timer),e.timer=setTimeout(o,150)}),void 0)},g.prototype.fnAutoSlide=function(){var a=this;a.opts.autoSwipe&&(a.autoSlide=setInterval(function(){o(a,"next",".3")},a.opts.speed))},g.prototype.goTo=function(a){var b=this;o(b,a,".3")}}(window,window.Zepto||window.jQuery); \ No newline at end of file From 06ddc6ca8bc3f311e915e4a15b40d7dffe817c83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A5=BF=E9=97=A8?= <1745745@qq.com> Date: Sun, 22 Mar 2015 13:11:13 +0800 Subject: [PATCH 12/16] 3.2.0 --- Changelog.md | 7 +- README.md | 34 ++++++- full-screen-pic.html | 4 +- full-screen-text.html | 63 +++++++++++- index-switch.html | 231 ++++++++++++++++++++++++++++++++++++++++++ index.html | 172 +------------------------------ js/swipeSlide.js | 29 +++--- js/swipeSlide.min.js | 4 +- 8 files changed, 351 insertions(+), 193 deletions(-) create mode 100644 index-switch.html diff --git a/Changelog.md b/Changelog.md index 789a307..23fb75c 100644 --- a/Changelog.md +++ b/Changelog.md @@ -1,3 +1,8 @@ +### 3.2.0(150322) + +* 增加回调callback方法sum参数 +* 修复连续滚动时只滚动一轮bug + ### 3.1.0(150313) * 支持指定索引值、前一屏、后一屏轮播 @@ -7,7 +12,7 @@ * 重构js * 支持resize -* 修改回调callback写法 +* 修改回调callback写法(废弃掉原来的callback写法) ### 2.2.1(150130) diff --git a/README.md b/README.md index 7afa996..67dd66f 100644 --- a/README.md +++ b/README.md @@ -19,11 +19,37 @@ Zepto 或者 jQuery +## 使用方法 + +```` +$('.element').swipeSlide({ + // 参数 +}); +```` + +## 参数列表 + +| 参数 | 说明 | 默认值 | 可填值 | +|------------------|----------|--------|----------------| +| ul | 父dom | ul | .element的子dom | +| li | 子dom | li | ul的子dom | +| continuousScroll | 连续滚动 | false | true和false | +| autoSwipe | 自动切换 | true | true和false | +| speed | 切换速度 | 4000 | 数字 | +| axisX | X轴滚动 | true | true和false | +| transitionType | 过渡类型 | ease | linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier | +| lazyLoad | 图片懒加载 | false | true和false | +| callback | 回调方法 | 空 | function(i,sum){}(i为索引值,sum为总和) | + ## 最新版本 -### 3.1.0(150313) +### 3.2.0(150322) + +* 增加回调callback方法sum参数 +* 修复连续滚动时只滚动一轮bug + +[所有更新日志](Changelog.md) -* 支持指定索引值、前一屏、后一屏轮播 -* 修复一屏内多图懒加载bug +## 缺点 -[所有更新日志](Changelog.md) \ No newline at end of file +只能固定高度或者成比例宽度,无法自适应高度。 \ No newline at end of file diff --git a/full-screen-pic.html b/full-screen-pic.html index 7e20129..6437a57 100644 --- a/full-screen-pic.html +++ b/full-screen-pic.html @@ -1,5 +1,5 @@ - - + + swipeSlide diff --git a/full-screen-text.html b/full-screen-text.html index 4940718..d819dcc 100644 --- a/full-screen-text.html +++ b/full-screen-text.html @@ -1,5 +1,5 @@ - - + + swipeSlide @@ -82,6 +82,51 @@ .full li.cur h1{ -webkit-transform: translate3d(0, 0, 0); } +.full .arrow{ + display: none; + position: absolute; + top: 50%; + width: 30px; + height: 30px; + line-height: 30px; + margin-top: -15px; + font-size: 30px; + text-align: center; +} +.full .arrow-left{ + left: 15px; + -webkit-animation:arrowLeft 1s ease-out infinite; + animation:arrowLeft 1s ease-out infinite; +} +.full .arrow-right{ + right: 15px; + -webkit-animation:arrowRight 1s ease-out infinite; + animation:arrowRight 1s ease-out infinite; +} +@-webkit-keyframes arrowLeft{ + 0%{ + -webkit-transform:translate3d(0, 0, 0); + transform:translate3d(0, 0, 0); + opacity:1; + } + 100%{ + -webkit-transform:translate3d(-50%, 0, 0); + transform:translate3d(-50%, 0, 0); + opacity:0; + } +} +@-webkit-keyframes arrowRight{ + 0%{ + -webkit-transform:translate3d(0, 0, 0); + transform:translate3d(0, 0, 0); + opacity:1; + } + 100%{ + -webkit-transform:translate3d(50%, 0, 0); + transform:translate3d(50%, 0, 0); + opacity:0; + } +} @@ -106,6 +151,8 @@

第四个的标题

第五个的标题

+
+
@@ -115,7 +162,17 @@

第五个的标题

$(function(){ $('.full').swipeSlide({ autoSwipe:false, - callback:function(i){ + callback:function(i,sum){ + if(i <= 0){ + $('.arrow-left').show(); + }else{ + $('.arrow-left').hide(); + } + if(i+1 >= sum){ + $('.arrow-right').show(); + }else{ + $('.arrow-right').hide(); + } $('.full li').eq(i).addClass('cur').siblings().removeClass('cur'); } }); diff --git a/index-switch.html b/index-switch.html new file mode 100644 index 0000000..8b22b29 --- /dev/null +++ b/index-switch.html @@ -0,0 +1,231 @@ + + + + + swipeSlide + + + +

西门的后花园

+

swipeSlide for Zepto/jQuery Plugin,移动端(基于Zepto/jQuery)的轮播插件

+ +
+
+ +
+ 1 + 2 + 3 + 4 +
+ +
+ +
+ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 627bcab..26ac528 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - - + + swipeSlide @@ -82,80 +82,6 @@ width: 320px; } -/* demo4 */ -.slide_tab{ - margin: 20px auto; - border-bottom: 1px solid #ccc; -} -.slide_tab .tab_box{ - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 44px; - line-height: 44px; - background-color: #aaa; - text-align: center; - color: #fff; -} -.slide_tab .btn_left,.slide_tab .btn_right{ - width: 50px; -} -.slide_tab .tab{ - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; -} -.slide_tab .tab span{ - display: block; - -webkit-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; -} -.slide_tab .tab .cur{ - background-color: #fff; - color: #333; -} -.slide_tab .product_box{ - position: relative; - overflow: hidden; - margin: 0; -} -.slide_tab .product_box:after{ - padding-top: 100%; -} -.slide_tab .product_box li:after{ - content:''; - display:table; - clear:both; -} -.slide_tab .product_box .pic{ - position: relative; - float: left; - width: 50%; - box-sizing: border-box; - border-right: 1px solid #ccc; - border-top: 1px solid #ccc; -} -.slide_tab .product_box .pic:after{ - content: ''; - display: block; - width: 100%; - padding-top: 100%; -} -.slide_tab .product_box .pic img{ - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; -} @@ -253,79 +179,6 @@

swipeSlide for Zepto/jQuery - - @@ -341,7 +194,7 @@

swipeSlide for Zepto/jQuery lazyLoad : true }); - // demo2 + // demo3 $('#slide3').swipeSlide({ continuousScroll:true, speed : 3000, @@ -350,25 +203,6 @@

swipeSlide for Zepto/jQuery $('.dot').children().eq(i).addClass('cur').siblings().removeClass('cur'); } }); - - // demo4 - var slideTab = $('.slide_tab .slide').swipeSlide({ - continuousScroll:true, - autoSwipe : false, - lazyLoad : true, - callback : function(i){ - $('.slide_tab .tab .item').eq(i).addClass('cur').siblings().removeClass('cur'); - } - }); - $('.slide_tab .tab .item').on('click',function(i){ - slideTab.goTo($(this).index()); - }); - $('.slide_tab .btn_left').on('click',function(i){ - slideTab.goTo('prev'); - }); - $('.slide_tab .btn_right').on('click',function(i){ - slideTab.goTo('next'); - }); }); diff --git a/js/swipeSlide.js b/js/swipeSlide.js index 775657d..964b369 100644 --- a/js/swipeSlide.js +++ b/js/swipeSlide.js @@ -2,7 +2,7 @@ * swipeSlide * http://ons.me/500.html * 西门 - * 3.1.0(150313) + * 3.2.0(150322) */ ;(function(win,$){ 'use strict'; @@ -50,15 +50,15 @@ sS.prototype.init = function(options){ var me = this; me.opts = $.extend({}, { - ul : me.$el.children('ul'), // 父dom - li : me.$el.children().children('li'), // 子dom + ul : me.$el.children('ul'), // 父dom + li : me.$el.children().children('li'), // 子dom continuousScroll : false, // 连续滚动 autoSwipe : true, // 自动切换 speed : 4000, // 切换速度 axisX : true, // X轴 transitionType : 'ease', // 过渡类型 - lazyLoad : false, // 懒加载 - callback : function(){} // 回调方法 + lazyLoad : false, // 图片懒加载 + callback : function(){} // 回调方法 }, options); // 轮播数量 me._liLength = me.opts.li.length; @@ -97,10 +97,10 @@ } // 调用轮播 - me.fnAutoSlide(); + fnAutoSlide(me); // 回调 - me.opts.callback(me._index); + me.opts.callback(me._index,me._liLength); // 绑定触摸 me.$el.on(touchEvents.touchStart,function(e){ @@ -242,14 +242,13 @@ } // 自动轮播 - sS.prototype.fnAutoSlide = function(){ - var me = this; + function fnAutoSlide(me){ if(me.opts.autoSwipe){ me.autoSlide = setInterval(function(){ fnSlide(me, 'next', '.3'); },me.opts.speed); } - }; + } // 指定轮播 sS.prototype.goTo = function(i){ @@ -306,12 +305,18 @@ me._index = 0; setTimeout(function(){ fnScroll(me, 0); + me.opts.callback(me._index,me._liLength); + fnAutoSlide(me); + return; },300); }else if(me._index < 0){ fnScroll(me, num); me._index = me._liLength-1; setTimeout(function(){ fnScroll(me, 0); + me.opts.callback(me._index,me._liLength); + fnAutoSlide(me); + return; },300); }else{ fnScroll(me, num); @@ -324,8 +329,8 @@ } fnScroll(me, num); } - me.opts.callback(me._index); - me.fnAutoSlide(); + me.opts.callback(me._index,me._liLength); + fnAutoSlide(me); } // 轮播动作 diff --git a/js/swipeSlide.min.js b/js/swipeSlide.min.js index cb2cbeb..5f90ed3 100644 --- a/js/swipeSlide.min.js +++ b/js/swipeSlide.min.js @@ -2,6 +2,6 @@ * swipeSlide * http://ons.me/500.html * 西门 - * 3.1.0(150313) + * 3.2.0(150322) */ -!function(a,b){"use strict";function h(a,b,c){b.css({"-webkit-transition":"all "+c+"s "+a.opts.transitionType,transition:"all "+c+"s "+a.opts.transitionType})}function i(a,b,c){var d=a.opts.axisX?c+"px,0,0":"0,"+c+"px,0";b.css({"-webkit-transform":"translate3d("+d+")",transform:"translate3d("+d+")"})}function j(a,c){var d=a.opts.ul.children(),e=d.eq(c).find("[data-src]");e&&e.each(function(){var c=b(this);c.is("img")?(c.attr("src",c.data("src")),c.removeAttr("data-src")):(c.css({"background-image":"url("+c.data("src")+")"}),c.removeAttr("data-src"))})}function k(a){e.touch&&!a.touches&&(a.touches=a.originalEvent.touches)}function l(a,b){b._startX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._startY=e.touch?a.touches[0].pageY:a.pageY||a.clientY}function m(a,b){a.preventDefault?a.preventDefault():a.returnValue=!1,b.opts.autoSwipe&&clearInterval(b.autoSlide),b.allowSlideClick=!1,b._curX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._curY=e.touch?a.touches[0].pageY:a.pageY||a.clientY,b._moveX=b._moveX_ie=b._curX-b._startX,b._moveY=b._moveY_ie=b._curY-b._startY,h(b,b.opts.ul,0),b._moveDistance=b._moveDistanceIE=b.opts.axisX?b._moveX:b._moveY,b.opts.continuousScroll||(0==b._index&&b._moveDistance>0||b._index+1>=b._liLength&&b._moveDistance<0)&&(b._moveDistance=0),i(b,b.opts.ul,-(b._slideDistance*b._index-b._moveDistance))}function n(a){(c.ie10||c.ie11)&&(Math.abs(a._moveDistanceIE)<5&&(a.allowSlideClick=!0),setTimeout(function(){a.allowSlideClick=!0},100)),Math.abs(a._moveDistance)<=a._distance?o(a,"",".3"):a._moveDistance>a._distance?o(a,"prev",".3"):o(a,"next",".3"),a._moveDistance=a._moveDistanceIE=0}function o(a,b,c){"number"==typeof b?(a._index=b,a.opts.lazyLoad&&(a.opts.continuousScroll?(j(a,a._index),j(a,a._index+1),j(a,a._index+2)):(j(a,a._index-1),j(a,a._index),j(a,a._index+1)))):"next"==b?(a._index++,a.opts.lazyLoad&&(a.opts.continuousScroll?j(a,a._index+2):j(a,a._index+1))):"prev"==b&&(a._index--,a.opts.lazyLoad&&(a._index<0?j(a,a._liLength-1):a.opts.continuousScroll?j(a,a._index):j(a,a._index-1))),a.opts.continuousScroll?a._index>=a._liLength?(p(a,c),a._index=0,setTimeout(function(){p(a,0)},300)):a._index<0?(p(a,c),a._index=a._liLength-1,setTimeout(function(){p(a,0)},300)):p(a,c):(a._index>=a._liLength?a._index=0:a._index<0&&(a._index=a._liLength-1),p(a,c)),a.opts.callback(a._index),a.fnAutoSlide()}function p(a,b){h(a,a.opts.ul,b),i(a,a.opts.ul,-a._index*a._slideDistance),clearInterval(a.autoSlide)}var f,g,c={ie10:a.navigator.msPointerEnabled,ie11:a.navigator.pointerEnabled},d=["touchstart","touchmove","touchend"],e={touch:a.Modernizr&&Modernizr.touch===!0||function(){return!!("ontouchstart"in a||a.DocumentTouch&&document instanceof DocumentTouch)}()};c.ie10&&(d=["MSPointerDown","MSPointerMove","MSPointerUp"]),c.ie11&&(d=["pointerdown","pointermove","pointerup"]),f={touchStart:d[0],touchMove:d[1],touchEnd:d[2]},b.fn.swipeSlide=function(a){return new g(this,a)},g=function(a,c){var d=this;d.$el=b(a),d._index=0,d._distance=50,d.allowSlideClick=!0,d.init(c)},g.prototype.init=function(d){function o(){var c,a=e.opts.ul.children();e._slideDistance=e.opts.axisX?e.opts.li.width():e.opts.li.height(),h(e,e.opts.ul,0),i(e,e.opts.ul,-e._slideDistance*e._index),h(e,a,0),c=e.opts.continuousScroll?-1:0,a.each(function(a){i(e,b(this),e._slideDistance*(a+c))})}var g,e=this;return e.opts=b.extend({},{ul:e.$el.children("ul"),li:e.$el.children().children("li"),continuousScroll:!1,autoSwipe:!0,speed:4e3,axisX:!0,transitionType:"ease",lazyLoad:!1,callback:function(){}},d),e._liLength=e.opts.li.length,e._liLength<=1?!1:(e.opts.lazyLoad&&(j(e,"0"),j(e,"1"),e.opts.continuousScroll&&j(e,e._liLength-1)),e.opts.continuousScroll&&e.opts.ul.prepend(e.opts.li.last().clone()).append(e.opts.li.first().clone()),o(),(c.ie10||c.ie11)&&(g="",g=e.opts.axisX?"pan-y":"none",e.$el.css({"-ms-touch-action":g,"touch-action":g}),e.$el.on("click",function(){return e.allowSlideClick})),e.fnAutoSlide(),e.opts.callback(e._index),e.$el.on(f.touchStart,function(a){k(a),l(a,e)}),e.$el.on(f.touchMove,function(a){k(a),m(a,e)}),e.$el.on(f.touchEnd,function(){n(e)}),b(a).on("onorientationchange"in a?"orientationchange":"resize",function(){clearTimeout(e.timer),e.timer=setTimeout(o,150)}),void 0)},g.prototype.fnAutoSlide=function(){var a=this;a.opts.autoSwipe&&(a.autoSlide=setInterval(function(){o(a,"next",".3")},a.opts.speed))},g.prototype.goTo=function(a){var b=this;o(b,a,".3")}}(window,window.Zepto||window.jQuery); \ No newline at end of file +!function(a,b){"use strict";function h(a,b,c){b.css({"-webkit-transition":"all "+c+"s "+a.opts.transitionType,transition:"all "+c+"s "+a.opts.transitionType})}function i(a,b,c){var d=a.opts.axisX?c+"px,0,0":"0,"+c+"px,0";b.css({"-webkit-transform":"translate3d("+d+")",transform:"translate3d("+d+")"})}function j(a,c){var d=a.opts.ul.children(),e=d.eq(c).find("[data-src]");e&&e.each(function(){var c=b(this);c.is("img")?(c.attr("src",c.data("src")),c.removeAttr("data-src")):(c.css({"background-image":"url("+c.data("src")+")"}),c.removeAttr("data-src"))})}function k(a){e.touch&&!a.touches&&(a.touches=a.originalEvent.touches)}function l(a,b){b._startX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._startY=e.touch?a.touches[0].pageY:a.pageY||a.clientY}function m(a,b){a.preventDefault?a.preventDefault():a.returnValue=!1,b.opts.autoSwipe&&clearInterval(b.autoSlide),b.allowSlideClick=!1,b._curX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._curY=e.touch?a.touches[0].pageY:a.pageY||a.clientY,b._moveX=b._moveX_ie=b._curX-b._startX,b._moveY=b._moveY_ie=b._curY-b._startY,h(b,b.opts.ul,0),b._moveDistance=b._moveDistanceIE=b.opts.axisX?b._moveX:b._moveY,b.opts.continuousScroll||(0==b._index&&b._moveDistance>0||b._index+1>=b._liLength&&b._moveDistance<0)&&(b._moveDistance=0),i(b,b.opts.ul,-(b._slideDistance*b._index-b._moveDistance))}function n(a){(c.ie10||c.ie11)&&(Math.abs(a._moveDistanceIE)<5&&(a.allowSlideClick=!0),setTimeout(function(){a.allowSlideClick=!0},100)),Math.abs(a._moveDistance)<=a._distance?p(a,"",".3"):a._moveDistance>a._distance?p(a,"prev",".3"):p(a,"next",".3"),a._moveDistance=a._moveDistanceIE=0}function o(a){a.opts.autoSwipe&&(a.autoSlide=setInterval(function(){p(a,"next",".3")},a.opts.speed))}function p(a,b,c){"number"==typeof b?(a._index=b,a.opts.lazyLoad&&(a.opts.continuousScroll?(j(a,a._index),j(a,a._index+1),j(a,a._index+2)):(j(a,a._index-1),j(a,a._index),j(a,a._index+1)))):"next"==b?(a._index++,a.opts.lazyLoad&&(a.opts.continuousScroll?j(a,a._index+2):j(a,a._index+1))):"prev"==b&&(a._index--,a.opts.lazyLoad&&(a._index<0?j(a,a._liLength-1):a.opts.continuousScroll?j(a,a._index):j(a,a._index-1))),a.opts.continuousScroll?a._index>=a._liLength?(q(a,c),a._index=0,setTimeout(function(){q(a,0),a.opts.callback(a._index,a._liLength),o(a)},300)):a._index<0?(q(a,c),a._index=a._liLength-1,setTimeout(function(){q(a,0),a.opts.callback(a._index,a._liLength),o(a)},300)):q(a,c):(a._index>=a._liLength?a._index=0:a._index<0&&(a._index=a._liLength-1),q(a,c)),a.opts.callback(a._index,a._liLength),o(a)}function q(a,b){h(a,a.opts.ul,b),i(a,a.opts.ul,-a._index*a._slideDistance),clearInterval(a.autoSlide)}var f,g,c={ie10:a.navigator.msPointerEnabled,ie11:a.navigator.pointerEnabled},d=["touchstart","touchmove","touchend"],e={touch:a.Modernizr&&Modernizr.touch===!0||function(){return!!("ontouchstart"in a||a.DocumentTouch&&document instanceof DocumentTouch)}()};c.ie10&&(d=["MSPointerDown","MSPointerMove","MSPointerUp"]),c.ie11&&(d=["pointerdown","pointermove","pointerup"]),f={touchStart:d[0],touchMove:d[1],touchEnd:d[2]},b.fn.swipeSlide=function(a){return new g(this,a)},g=function(a,c){var d=this;d.$el=b(a),d._index=0,d._distance=50,d.allowSlideClick=!0,d.init(c)},g.prototype.init=function(d){function p(){var c,a=e.opts.ul.children();e._slideDistance=e.opts.axisX?e.opts.li.width():e.opts.li.height(),h(e,e.opts.ul,0),i(e,e.opts.ul,-e._slideDistance*e._index),h(e,a,0),c=e.opts.continuousScroll?-1:0,a.each(function(a){i(e,b(this),e._slideDistance*(a+c))})}var g,e=this;return e.opts=b.extend({},{ul:e.$el.children("ul"),li:e.$el.children().children("li"),continuousScroll:!1,autoSwipe:!0,speed:4e3,axisX:!0,transitionType:"ease",lazyLoad:!1,callback:function(){}},d),e._liLength=e.opts.li.length,e._liLength<=1?!1:(e.opts.lazyLoad&&(j(e,"0"),j(e,"1"),e.opts.continuousScroll&&j(e,e._liLength-1)),e.opts.continuousScroll&&e.opts.ul.prepend(e.opts.li.last().clone()).append(e.opts.li.first().clone()),p(),(c.ie10||c.ie11)&&(g="",g=e.opts.axisX?"pan-y":"none",e.$el.css({"-ms-touch-action":g,"touch-action":g}),e.$el.on("click",function(){return e.allowSlideClick})),o(e),e.opts.callback(e._index,e._liLength),e.$el.on(f.touchStart,function(a){k(a),l(a,e)}),e.$el.on(f.touchMove,function(a){k(a),m(a,e)}),e.$el.on(f.touchEnd,function(){n(e)}),b(a).on("onorientationchange"in a?"orientationchange":"resize",function(){clearTimeout(e.timer),e.timer=setTimeout(p,150)}),void 0)},g.prototype.goTo=function(a){var b=this;p(b,a,".3")}}(window,window.Zepto||window.jQuery); \ No newline at end of file From 66ec3c8c4b5fcfb54aa0fd7c3465a548e630b9f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A5=BF=E9=97=A8?= <1745745@qq.com> Date: Sun, 22 Mar 2015 13:20:09 +0800 Subject: [PATCH 13/16] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=AC=AC4=E4=B8=AAdemo?= =?UTF-8?q?=E4=BA=8C=E7=BB=B4=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 3 +++ website-switch.png | Bin 0 -> 1086 bytes 2 files changed, 3 insertions(+) create mode 100644 website-switch.png diff --git a/README.md b/README.md index 67dd66f..9b886ed 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,9 @@ ![扫一扫](website-text.png) [DEMO链接](http://ons.me/wp-content/uploads/2014/09/swipeSlide/full-screen-text.html) +![扫一扫](website-switch.png) +[DEMO链接](http://ons.me/wp-content/uploads/2014/09/swipeSlide/index-switch.html) + ## 依赖 Zepto 或者 jQuery diff --git a/website-switch.png b/website-switch.png new file mode 100644 index 0000000000000000000000000000000000000000..75f6fb1d5993a5cc5fd26d4e4fa33f5fc7bc122e GIT binary patch literal 1086 zcmV-E1i|}>P);A;ie{cmAF*9hzVwOA4#?XQstcXPupWX1=2e69nTeZE7mNk`Vckrs<%UyDTJePrbYVknO< zQ!*qKVQr-U$Tlbyq@CSYh^XUUKNLveA==)GA)#Oj5g6JkLr@^|An zU=Rip8;`n}HLV~{QMC+2y_9)lFN33;`N%U1S3y{w^W`iQ^M_VWR*sS6pPFGcB!3-e zBN1{mX9@Ya(03(7^17HuY}RuO-HpbC{2vG5$bEy@>N&6d*{8wd!AdM@M~9q1 zx~>u;Q*d0O@8tJ`;0Q=M)R0rE)sQ0tk{sJ-=G~kf5O*3aoDxNg(2Gb)KHJ1_mUm`VPrB_VXO!Ah0W435~EiU%gYa^Uv7h(=Cd?hVw_KX^em+>t09Hg9}p*_z>%07*qoM6N<$ Ef_OLhu>b%7 literal 0 HcmV?d00001 From e4cccb9160d5f001f1880d1a87fe5e6118f677c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A5=BF=E9=97=A8?= <1745745@qq.com> Date: Tue, 31 Mar 2015 09:55:43 +0800 Subject: [PATCH 14/16] 3.2.1 --- Changelog.md | 4 ++++ README.md | 19 +++++++++------ full-screen-pic.html | 3 +++ js/swipeSlide.js | 55 ++++++++++++++++++++++++++++++-------------- js/swipeSlide.min.js | 4 ++-- 5 files changed, 59 insertions(+), 26 deletions(-) diff --git a/Changelog.md b/Changelog.md index 23fb75c..f368838 100644 --- a/Changelog.md +++ b/Changelog.md @@ -1,3 +1,7 @@ +### 3.2.1(150331) + +* 优化滑动时禁止另外一个方向的滑动事件 + ### 3.2.0(150322) * 增加回调callback方法sum参数 diff --git a/README.md b/README.md index 9b886ed..681affb 100644 --- a/README.md +++ b/README.md @@ -7,16 +7,16 @@ ## 示例 ![扫一扫](website.png) -[DEMO链接](http://ons.me/wp-content/uploads/2014/09/swipeSlide/index.html) +[DEMO1链接](http://ons.me/wp-content/uploads/2014/09/swipeSlide/index.html) ![扫一扫](website-pic.png) -[DEMO链接](http://ons.me/wp-content/uploads/2014/09/swipeSlide/full-screen-pic.html) +[DEMO2链接](http://ons.me/wp-content/uploads/2014/09/swipeSlide/full-screen-pic.html) ![扫一扫](website-text.png) -[DEMO链接](http://ons.me/wp-content/uploads/2014/09/swipeSlide/full-screen-text.html) +[DEMO3链接](http://ons.me/wp-content/uploads/2014/09/swipeSlide/full-screen-text.html) ![扫一扫](website-switch.png) -[DEMO链接](http://ons.me/wp-content/uploads/2014/09/swipeSlide/index-switch.html) +[DEMO4链接](http://ons.me/wp-content/uploads/2014/09/swipeSlide/index-switch.html) ## 依赖 @@ -44,12 +44,17 @@ $('.element').swipeSlide({ | lazyLoad | 图片懒加载 | false | true和false | | callback | 回调方法 | 空 | function(i,sum){}(i为索引值,sum为总和) | +## API + +暴露一些功能,可以让swipeSlide更灵活的使用 + +`goTo(num)` 指定轮播,详见[DEMO4代码](index-switch.html) + ## 最新版本 -### 3.2.0(150322) +### 3.2.1(150331) -* 增加回调callback方法sum参数 -* 修复连续滚动时只滚动一轮bug +* 优化滑动时禁止另外一个方向的滑动事件 [所有更新日志](Changelog.md) diff --git a/full-screen-pic.html b/full-screen-pic.html index 6437a57..60867f7 100644 --- a/full-screen-pic.html +++ b/full-screen-pic.html @@ -22,6 +22,9 @@ height: 100%; overflow: hidden; } +.full{ + overflow: hidden; +} .full,.full ul{ position: absolute; left: 0; diff --git a/js/swipeSlide.js b/js/swipeSlide.js index 964b369..e6c0d54 100644 --- a/js/swipeSlide.js +++ b/js/swipeSlide.js @@ -2,7 +2,7 @@ * swipeSlide * http://ons.me/500.html * 西门 - * 3.2.0(150322) + * 3.2.1(150331) */ ;(function(win,$){ 'use strict'; @@ -62,6 +62,7 @@ }, options); // 轮播数量 me._liLength = me.opts.li.length; + me.isScrolling; // 如果轮播小于等于1个,跳出 if(me._liLength <= 1) return false; @@ -114,6 +115,9 @@ me.$el.on(touchEvents.touchEnd,function(){ fnTouchend(me); }); + me.opts.ul.on('webkitTransitionEnd MSTransitionEnd transitionend',function(){ + fnAutoSlide(me); + }); // 横竖屏、窗口调整 $(win).on('onorientationchange' in win ? 'orientationchange' : 'resize',function(){ @@ -180,6 +184,7 @@ // touchstart function fnTouchstart(e, me){ + me.isScrolling = undefined; // 按下时的坐标 me._startX = support.touch ? e.touches[0].pageX : (e.pageX || e.clientX); me._startY = support.touch ? e.touches[0].pageY : (e.pageY || e.clientY); @@ -187,22 +192,33 @@ // touchmove function fnTouchmove(e, me){ - if (e.preventDefault) e.preventDefault(); - else e.returnValue = false; + me._moveDistance = me._moveDistanceIE = 0; // 如果自动切换,move的时候清除autoSlide自动轮播方法 - if(me.opts.autoSwipe) clearInterval(me.autoSlide); + if(me.opts.autoSwipe) fnStopSlide(me); me.allowSlideClick = false; // 触摸时的坐标 me._curX = support.touch ? e.touches[0].pageX : (e.pageX || e.clientX); me._curY = support.touch ? e.touches[0].pageY : (e.pageY || e.clientY); // 触摸时的距离 - me._moveX = me._moveX_ie = me._curX - me._startX; - me._moveY = me._moveY_ie = me._curY - me._startY; - - // 触摸时跟手 - fnTransition(me, me.opts.ul, 0); + me._moveX = me._curX - me._startX; + me._moveY = me._curY - me._startY; + // 优化触摸禁止事件 + if(typeof me.isScrolling == 'undefined'){ + if(me.opts.axisX){ + me.isScrolling = !!(Math.abs(me._moveX) >= Math.abs(me._moveY)); + }else{ + me.isScrolling = !!(Math.abs(me._moveY) >= Math.abs(me._moveX)); + } + } + // 距离 - me._moveDistance = me._moveDistanceIE = me.opts.axisX ? me._moveX : me._moveY; + if(me.isScrolling){ + if (e.preventDefault) e.preventDefault(); + else e.returnValue = false; + // 触摸时跟手 + fnTransition(me, me.opts.ul, 0); + me._moveDistance = me._moveDistanceIE = me.opts.axisX ? me._moveX : me._moveY; + } if(!me.opts.continuousScroll){ // 如果是第一屏,并且往下滚动,就不让滚动 || 如果是最后一屏,并且往上滚动,就不让滚动 if(me._index == 0 && me._moveDistance > 0 || (me._index + 1) >= me._liLength && me._moveDistance < 0){ @@ -215,8 +231,13 @@ // touchend function fnTouchend(me){ + // 优化触摸禁止事件 + if(!me.isScrolling){ + fnAutoSlide(me); + } + + // 解决IE滑动触发click if(browser.ie10 || browser.ie11){ - // 解决IE滑动触发click if(Math.abs(me._moveDistanceIE) < 5){ me.allowSlideClick = true; } @@ -238,18 +259,23 @@ fnSlide(me, 'next', '.3'); } } - me._moveDistance = me._moveDistanceIE = 0; } // 自动轮播 function fnAutoSlide(me){ if(me.opts.autoSwipe){ + fnStopSlide(me); me.autoSlide = setInterval(function(){ fnSlide(me, 'next', '.3'); },me.opts.speed); } } + // 停止轮播 + function fnStopSlide(me){ + clearInterval(me.autoSlide); + } + // 指定轮播 sS.prototype.goTo = function(i){ var me = this; @@ -306,7 +332,6 @@ setTimeout(function(){ fnScroll(me, 0); me.opts.callback(me._index,me._liLength); - fnAutoSlide(me); return; },300); }else if(me._index < 0){ @@ -315,7 +340,6 @@ setTimeout(function(){ fnScroll(me, 0); me.opts.callback(me._index,me._liLength); - fnAutoSlide(me); return; },300); }else{ @@ -330,15 +354,12 @@ fnScroll(me, num); } me.opts.callback(me._index,me._liLength); - fnAutoSlide(me); } // 轮播动作 function fnScroll(me, num){ fnTransition(me, me.opts.ul, num); fnTranslate(me, me.opts.ul, -me._index*me._slideDistance); - // 清除autoSlide自动轮播方法 - clearInterval(me.autoSlide); } })(window, window.Zepto || window.jQuery); \ No newline at end of file diff --git a/js/swipeSlide.min.js b/js/swipeSlide.min.js index 5f90ed3..82c84f1 100644 --- a/js/swipeSlide.min.js +++ b/js/swipeSlide.min.js @@ -2,6 +2,6 @@ * swipeSlide * http://ons.me/500.html * 西门 - * 3.2.0(150322) + * 3.2.1(150331) */ -!function(a,b){"use strict";function h(a,b,c){b.css({"-webkit-transition":"all "+c+"s "+a.opts.transitionType,transition:"all "+c+"s "+a.opts.transitionType})}function i(a,b,c){var d=a.opts.axisX?c+"px,0,0":"0,"+c+"px,0";b.css({"-webkit-transform":"translate3d("+d+")",transform:"translate3d("+d+")"})}function j(a,c){var d=a.opts.ul.children(),e=d.eq(c).find("[data-src]");e&&e.each(function(){var c=b(this);c.is("img")?(c.attr("src",c.data("src")),c.removeAttr("data-src")):(c.css({"background-image":"url("+c.data("src")+")"}),c.removeAttr("data-src"))})}function k(a){e.touch&&!a.touches&&(a.touches=a.originalEvent.touches)}function l(a,b){b._startX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._startY=e.touch?a.touches[0].pageY:a.pageY||a.clientY}function m(a,b){a.preventDefault?a.preventDefault():a.returnValue=!1,b.opts.autoSwipe&&clearInterval(b.autoSlide),b.allowSlideClick=!1,b._curX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._curY=e.touch?a.touches[0].pageY:a.pageY||a.clientY,b._moveX=b._moveX_ie=b._curX-b._startX,b._moveY=b._moveY_ie=b._curY-b._startY,h(b,b.opts.ul,0),b._moveDistance=b._moveDistanceIE=b.opts.axisX?b._moveX:b._moveY,b.opts.continuousScroll||(0==b._index&&b._moveDistance>0||b._index+1>=b._liLength&&b._moveDistance<0)&&(b._moveDistance=0),i(b,b.opts.ul,-(b._slideDistance*b._index-b._moveDistance))}function n(a){(c.ie10||c.ie11)&&(Math.abs(a._moveDistanceIE)<5&&(a.allowSlideClick=!0),setTimeout(function(){a.allowSlideClick=!0},100)),Math.abs(a._moveDistance)<=a._distance?p(a,"",".3"):a._moveDistance>a._distance?p(a,"prev",".3"):p(a,"next",".3"),a._moveDistance=a._moveDistanceIE=0}function o(a){a.opts.autoSwipe&&(a.autoSlide=setInterval(function(){p(a,"next",".3")},a.opts.speed))}function p(a,b,c){"number"==typeof b?(a._index=b,a.opts.lazyLoad&&(a.opts.continuousScroll?(j(a,a._index),j(a,a._index+1),j(a,a._index+2)):(j(a,a._index-1),j(a,a._index),j(a,a._index+1)))):"next"==b?(a._index++,a.opts.lazyLoad&&(a.opts.continuousScroll?j(a,a._index+2):j(a,a._index+1))):"prev"==b&&(a._index--,a.opts.lazyLoad&&(a._index<0?j(a,a._liLength-1):a.opts.continuousScroll?j(a,a._index):j(a,a._index-1))),a.opts.continuousScroll?a._index>=a._liLength?(q(a,c),a._index=0,setTimeout(function(){q(a,0),a.opts.callback(a._index,a._liLength),o(a)},300)):a._index<0?(q(a,c),a._index=a._liLength-1,setTimeout(function(){q(a,0),a.opts.callback(a._index,a._liLength),o(a)},300)):q(a,c):(a._index>=a._liLength?a._index=0:a._index<0&&(a._index=a._liLength-1),q(a,c)),a.opts.callback(a._index,a._liLength),o(a)}function q(a,b){h(a,a.opts.ul,b),i(a,a.opts.ul,-a._index*a._slideDistance),clearInterval(a.autoSlide)}var f,g,c={ie10:a.navigator.msPointerEnabled,ie11:a.navigator.pointerEnabled},d=["touchstart","touchmove","touchend"],e={touch:a.Modernizr&&Modernizr.touch===!0||function(){return!!("ontouchstart"in a||a.DocumentTouch&&document instanceof DocumentTouch)}()};c.ie10&&(d=["MSPointerDown","MSPointerMove","MSPointerUp"]),c.ie11&&(d=["pointerdown","pointermove","pointerup"]),f={touchStart:d[0],touchMove:d[1],touchEnd:d[2]},b.fn.swipeSlide=function(a){return new g(this,a)},g=function(a,c){var d=this;d.$el=b(a),d._index=0,d._distance=50,d.allowSlideClick=!0,d.init(c)},g.prototype.init=function(d){function p(){var c,a=e.opts.ul.children();e._slideDistance=e.opts.axisX?e.opts.li.width():e.opts.li.height(),h(e,e.opts.ul,0),i(e,e.opts.ul,-e._slideDistance*e._index),h(e,a,0),c=e.opts.continuousScroll?-1:0,a.each(function(a){i(e,b(this),e._slideDistance*(a+c))})}var g,e=this;return e.opts=b.extend({},{ul:e.$el.children("ul"),li:e.$el.children().children("li"),continuousScroll:!1,autoSwipe:!0,speed:4e3,axisX:!0,transitionType:"ease",lazyLoad:!1,callback:function(){}},d),e._liLength=e.opts.li.length,e._liLength<=1?!1:(e.opts.lazyLoad&&(j(e,"0"),j(e,"1"),e.opts.continuousScroll&&j(e,e._liLength-1)),e.opts.continuousScroll&&e.opts.ul.prepend(e.opts.li.last().clone()).append(e.opts.li.first().clone()),p(),(c.ie10||c.ie11)&&(g="",g=e.opts.axisX?"pan-y":"none",e.$el.css({"-ms-touch-action":g,"touch-action":g}),e.$el.on("click",function(){return e.allowSlideClick})),o(e),e.opts.callback(e._index,e._liLength),e.$el.on(f.touchStart,function(a){k(a),l(a,e)}),e.$el.on(f.touchMove,function(a){k(a),m(a,e)}),e.$el.on(f.touchEnd,function(){n(e)}),b(a).on("onorientationchange"in a?"orientationchange":"resize",function(){clearTimeout(e.timer),e.timer=setTimeout(p,150)}),void 0)},g.prototype.goTo=function(a){var b=this;p(b,a,".3")}}(window,window.Zepto||window.jQuery); \ No newline at end of file +!function(a,b){"use strict";function h(a,b,c){b.css({"-webkit-transition":"all "+c+"s "+a.opts.transitionType,transition:"all "+c+"s "+a.opts.transitionType})}function i(a,b,c){var d=a.opts.axisX?c+"px,0,0":"0,"+c+"px,0";b.css({"-webkit-transform":"translate3d("+d+")",transform:"translate3d("+d+")"})}function j(a,c){var d=a.opts.ul.children(),e=d.eq(c).find("[data-src]");e&&e.each(function(){var c=b(this);c.is("img")?(c.attr("src",c.data("src")),c.removeAttr("data-src")):(c.css({"background-image":"url("+c.data("src")+")"}),c.removeAttr("data-src"))})}function k(a){e.touch&&!a.touches&&(a.touches=a.originalEvent.touches)}function l(a,b){b.isScrolling=void 0,b._startX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._startY=e.touch?a.touches[0].pageY:a.pageY||a.clientY}function m(a,b){b._moveDistance=b._moveDistanceIE=0,b.opts.autoSwipe&&p(b),b.allowSlideClick=!1,b._curX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._curY=e.touch?a.touches[0].pageY:a.pageY||a.clientY,b._moveX=b._curX-b._startX,b._moveY=b._curY-b._startY,"undefined"==typeof b.isScrolling&&(b.isScrolling=b.opts.axisX?!!(Math.abs(b._moveX)>=Math.abs(b._moveY)):!!(Math.abs(b._moveY)>=Math.abs(b._moveX))),b.isScrolling&&(a.preventDefault?a.preventDefault():a.returnValue=!1,h(b,b.opts.ul,0),b._moveDistance=b._moveDistanceIE=b.opts.axisX?b._moveX:b._moveY),b.opts.continuousScroll||(0==b._index&&b._moveDistance>0||b._index+1>=b._liLength&&b._moveDistance<0)&&(b._moveDistance=0),i(b,b.opts.ul,-(b._slideDistance*b._index-b._moveDistance))}function n(a){a.isScrolling||o(a),(c.ie10||c.ie11)&&(Math.abs(a._moveDistanceIE)<5&&(a.allowSlideClick=!0),setTimeout(function(){a.allowSlideClick=!0},100)),Math.abs(a._moveDistance)<=a._distance?q(a,"",".3"):a._moveDistance>a._distance?q(a,"prev",".3"):q(a,"next",".3")}function o(a){a.opts.autoSwipe&&(p(a),a.autoSlide=setInterval(function(){q(a,"next",".3")},a.opts.speed))}function p(a){clearInterval(a.autoSlide)}function q(a,b,c){"number"==typeof b?(a._index=b,a.opts.lazyLoad&&(a.opts.continuousScroll?(j(a,a._index),j(a,a._index+1),j(a,a._index+2)):(j(a,a._index-1),j(a,a._index),j(a,a._index+1)))):"next"==b?(a._index++,a.opts.lazyLoad&&(a.opts.continuousScroll?j(a,a._index+2):j(a,a._index+1))):"prev"==b&&(a._index--,a.opts.lazyLoad&&(a._index<0?j(a,a._liLength-1):a.opts.continuousScroll?j(a,a._index):j(a,a._index-1))),a.opts.continuousScroll?a._index>=a._liLength?(r(a,c),a._index=0,setTimeout(function(){r(a,0),a.opts.callback(a._index,a._liLength)},300)):a._index<0?(r(a,c),a._index=a._liLength-1,setTimeout(function(){r(a,0),a.opts.callback(a._index,a._liLength)},300)):r(a,c):(a._index>=a._liLength?a._index=0:a._index<0&&(a._index=a._liLength-1),r(a,c)),a.opts.callback(a._index,a._liLength)}function r(a,b){h(a,a.opts.ul,b),i(a,a.opts.ul,-a._index*a._slideDistance)}var f,g,c={ie10:a.navigator.msPointerEnabled,ie11:a.navigator.pointerEnabled},d=["touchstart","touchmove","touchend"],e={touch:a.Modernizr&&Modernizr.touch===!0||function(){return!!("ontouchstart"in a||a.DocumentTouch&&document instanceof DocumentTouch)}()};c.ie10&&(d=["MSPointerDown","MSPointerMove","MSPointerUp"]),c.ie11&&(d=["pointerdown","pointermove","pointerup"]),f={touchStart:d[0],touchMove:d[1],touchEnd:d[2]},b.fn.swipeSlide=function(a){return new g(this,a)},g=function(a,c){var d=this;d.$el=b(a),d._index=0,d._distance=50,d.allowSlideClick=!0,d.init(c)},g.prototype.init=function(d){function p(){var c,a=e.opts.ul.children();e._slideDistance=e.opts.axisX?e.opts.li.width():e.opts.li.height(),h(e,e.opts.ul,0),i(e,e.opts.ul,-e._slideDistance*e._index),h(e,a,0),c=e.opts.continuousScroll?-1:0,a.each(function(a){i(e,b(this),e._slideDistance*(a+c))})}var g,e=this;return e.opts=b.extend({},{ul:e.$el.children("ul"),li:e.$el.children().children("li"),continuousScroll:!1,autoSwipe:!0,speed:4e3,axisX:!0,transitionType:"ease",lazyLoad:!1,callback:function(){}},d),e._liLength=e.opts.li.length,e.isScrolling,e._liLength<=1?!1:(e.opts.lazyLoad&&(j(e,"0"),j(e,"1"),e.opts.continuousScroll&&j(e,e._liLength-1)),e.opts.continuousScroll&&e.opts.ul.prepend(e.opts.li.last().clone()).append(e.opts.li.first().clone()),p(),(c.ie10||c.ie11)&&(g="",g=e.opts.axisX?"pan-y":"none",e.$el.css({"-ms-touch-action":g,"touch-action":g}),e.$el.on("click",function(){return e.allowSlideClick})),o(e),e.opts.callback(e._index,e._liLength),e.$el.on(f.touchStart,function(a){k(a),l(a,e)}),e.$el.on(f.touchMove,function(a){k(a),m(a,e)}),e.$el.on(f.touchEnd,function(){n(e)}),e.opts.ul.on("webkitTransitionEnd MSTransitionEnd transitionend",function(){o(e)}),b(a).on("onorientationchange"in a?"orientationchange":"resize",function(){clearTimeout(e.timer),e.timer=setTimeout(p,150)}),void 0)},g.prototype.goTo=function(a){var b=this;q(b,a,".3")}}(window,window.Zepto||window.jQuery); \ No newline at end of file From 6ef39f8eca297d0650353d5c53e2677f9f24efc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A5=BF=E9=97=A8?= <1745745@qq.com> Date: Fri, 24 Apr 2015 22:08:59 +0800 Subject: [PATCH 15/16] 3.3.0 --- Changelog.md | 7 +- README.md | 6 +- comment-thumbnails.html | 211 ++++++++++++++++++++++++++++++++++++++++ js/swipeSlide.js | 60 ++++++++---- js/swipeSlide.min.js | 4 +- 5 files changed, 264 insertions(+), 24 deletions(-) create mode 100644 comment-thumbnails.html diff --git a/Changelog.md b/Changelog.md index f368838..b8cb244 100644 --- a/Changelog.md +++ b/Changelog.md @@ -1,3 +1,8 @@ +### 3.3.0(150424) + +* 增加轮播初始值index参数 +* 修复点击触发轮播滚动 + ### 3.2.1(150331) * 优化滑动时禁止另外一个方向的滑动事件 @@ -9,7 +14,7 @@ ### 3.1.0(150313) -* 支持指定索引值、前一屏、后一屏轮播 +* 支持指定索引值方法、前一屏、后一屏轮播 * 修复一屏内多图懒加载bug ### 3.0.0(150227) diff --git a/README.md b/README.md index 681affb..e7c2b8c 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,7 @@ $('.element').swipeSlide({ |------------------|----------|--------|----------------| | ul | 父dom | ul | .element的子dom | | li | 子dom | li | ul的子dom | +| index | 轮播初始值 | 0 | 数字 | | continuousScroll | 连续滚动 | false | true和false | | autoSwipe | 自动切换 | true | true和false | | speed | 切换速度 | 4000 | 数字 | @@ -52,9 +53,10 @@ $('.element').swipeSlide({ ## 最新版本 -### 3.2.1(150331) +### 3.3.0(150424) -* 优化滑动时禁止另外一个方向的滑动事件 +* 增加轮播初始值index参数 +* 修复点击触发轮播滚动 [所有更新日志](Changelog.md) diff --git a/comment-thumbnails.html b/comment-thumbnails.html new file mode 100644 index 0000000..3512db2 --- /dev/null +++ b/comment-thumbnails.html @@ -0,0 +1,211 @@ + + + + + swipeSlide + + + +

西门的后花园

+

swipeSlide for Zepto/jQuery Plugin,移动端(基于Zepto/jQuery)的轮播插件

+ +

用户评价

+
+
+

选了很久选定的,色彩亮丽,无瑕疵,初始激活是机子很烫,持续了一段时间,致电苹果售后咨询,态度很好,说这个现象是正常的,别人也提出过,之后使用就不会出现了。之后使用5天,均未再出现此状况,持续关注。

+
+ + + +
+
+
+

买了一箱很不错啦 很喜欢 还买了10包 这个 奥尔良味道能淡一点 烤肉味道 好吃呢 可喜欢啦 边评论边流口水了。。。

+
+ + + + + +
+
+
+ +
+ × +
+ / +
+
+ + + + + + + \ No newline at end of file diff --git a/js/swipeSlide.js b/js/swipeSlide.js index e6c0d54..e8df1fc 100644 --- a/js/swipeSlide.js +++ b/js/swipeSlide.js @@ -2,7 +2,7 @@ * swipeSlide * http://ons.me/500.html * 西门 - * 3.2.1(150331) + * 3.3.0(150424) */ ;(function(win,$){ 'use strict'; @@ -40,7 +40,6 @@ var sS = function(element, options){ var me = this; me.$el = $(element); - me._index = 0; me._distance = 50; me.allowSlideClick = true; me.init(options); @@ -52,6 +51,7 @@ me.opts = $.extend({}, { ul : me.$el.children('ul'), // 父dom li : me.$el.children().children('li'), // 子dom + index : 0, // 轮播初始值 continuousScroll : false, // 连续滚动 autoSwipe : true, // 自动切换 speed : 4000, // 切换速度 @@ -60,6 +60,7 @@ lazyLoad : false, // 图片懒加载 callback : function(){} // 回调方法 }, options); + me._index = me.opts.index; // 轮播数量 me._liLength = me.opts.li.length; me.isScrolling; @@ -67,17 +68,27 @@ // 如果轮播小于等于1个,跳出 if(me._liLength <= 1) return false; + // 连续滚动,复制dom + if(me.opts.continuousScroll) me.opts.ul.prepend(me.opts.li.last().clone()).append(me.opts.li.first().clone()); + // 懒加载图片 if(me.opts.lazyLoad){ - fnLazyLoad(me, '0'); - fnLazyLoad(me, '1'); - // 加载最后一屏,为了连续滚动复制dom - if(me.opts.continuousScroll) fnLazyLoad(me, me._liLength-1); + fnLazyLoad(me, me._index); + if(me.opts.continuousScroll){ + fnLazyLoad(me, me._index+1); + fnLazyLoad(me, me._index+2); + // 如果是第一屏 + if(me._index == 0){ + fnLazyLoad(me, me._liLength); + // 如果是最后一屏 + }else if(me._index+1 == me._liLength){ + fnLazyLoad(me, 1); + } + }else{ + fnLazyLoad(me, me._index+1 == me._liLength ? me._liLength-2 : me._index+1); + } } - // 连续滚动,复制dom - if(me.opts.continuousScroll) me.opts.ul.prepend(me.opts.li.last().clone()).append(me.opts.li.first().clone()); - // 轮播的宽度 fnGetSlideDistance(); @@ -185,6 +196,7 @@ // touchstart function fnTouchstart(e, me){ me.isScrolling = undefined; + me._moveDistance = me._moveDistanceIE = 0; // 按下时的坐标 me._startX = support.touch ? e.touches[0].pageX : (e.pageX || e.clientX); me._startY = support.touch ? e.touches[0].pageY : (e.pageY || e.clientY); @@ -192,7 +204,6 @@ // touchmove function fnTouchmove(e, me){ - me._moveDistance = me._moveDistanceIE = 0; // 如果自动切换,move的时候清除autoSlide自动轮播方法 if(me.opts.autoSwipe) fnStopSlide(me); me.allowSlideClick = false; @@ -255,10 +266,11 @@ if(me._moveDistance > me._distance){ fnSlide(me, 'prev', '.3'); // 手指触摸下一屏滚动 - }else{ + }else if(Math.abs(me._moveDistance) > me._distance){ fnSlide(me, 'next', '.3'); } } + me._moveDistance = me._moveDistanceIE = 0; } // 自动轮播 @@ -305,6 +317,13 @@ if(me.opts.lazyLoad){ if(me.opts.continuousScroll){ fnLazyLoad(me, me._index+2); + // 滑到最后一屏 + if(me._index+1 == me._liLength){ + fnLazyLoad(me, 1); + // 最后一屏,继续往后滑动 + }else if(me._index == me._liLength){ + fnLazyLoad(me, 0); + } }else{ fnLazyLoad(me, me._index+1); } @@ -312,15 +331,18 @@ }else if(go == 'prev'){ me._index--; if(me.opts.lazyLoad){ - // 往前到最后一屏,加载最后一屏前一屏 - if(me._index < 0){ - fnLazyLoad(me, me._liLength-1); - }else{ - if(me.opts.continuousScroll){ - fnLazyLoad(me, me._index); - }else{ - fnLazyLoad(me, me._index-1); + if(me.opts.continuousScroll){ + fnLazyLoad(me, me._index); + // 滑到第一屏 + if(me._index == 0){ + fnLazyLoad(me, me._liLength); + + // 第一屏,继续往前滑动 + }else if(me._index < 0){ + fnLazyLoad(me, me._liLength-1); } + }else{ + fnLazyLoad(me, me._index-1); } } } diff --git a/js/swipeSlide.min.js b/js/swipeSlide.min.js index 82c84f1..dbf65d2 100644 --- a/js/swipeSlide.min.js +++ b/js/swipeSlide.min.js @@ -2,6 +2,6 @@ * swipeSlide * http://ons.me/500.html * 西门 - * 3.2.1(150331) + * 3.3.0(150424) */ -!function(a,b){"use strict";function h(a,b,c){b.css({"-webkit-transition":"all "+c+"s "+a.opts.transitionType,transition:"all "+c+"s "+a.opts.transitionType})}function i(a,b,c){var d=a.opts.axisX?c+"px,0,0":"0,"+c+"px,0";b.css({"-webkit-transform":"translate3d("+d+")",transform:"translate3d("+d+")"})}function j(a,c){var d=a.opts.ul.children(),e=d.eq(c).find("[data-src]");e&&e.each(function(){var c=b(this);c.is("img")?(c.attr("src",c.data("src")),c.removeAttr("data-src")):(c.css({"background-image":"url("+c.data("src")+")"}),c.removeAttr("data-src"))})}function k(a){e.touch&&!a.touches&&(a.touches=a.originalEvent.touches)}function l(a,b){b.isScrolling=void 0,b._startX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._startY=e.touch?a.touches[0].pageY:a.pageY||a.clientY}function m(a,b){b._moveDistance=b._moveDistanceIE=0,b.opts.autoSwipe&&p(b),b.allowSlideClick=!1,b._curX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._curY=e.touch?a.touches[0].pageY:a.pageY||a.clientY,b._moveX=b._curX-b._startX,b._moveY=b._curY-b._startY,"undefined"==typeof b.isScrolling&&(b.isScrolling=b.opts.axisX?!!(Math.abs(b._moveX)>=Math.abs(b._moveY)):!!(Math.abs(b._moveY)>=Math.abs(b._moveX))),b.isScrolling&&(a.preventDefault?a.preventDefault():a.returnValue=!1,h(b,b.opts.ul,0),b._moveDistance=b._moveDistanceIE=b.opts.axisX?b._moveX:b._moveY),b.opts.continuousScroll||(0==b._index&&b._moveDistance>0||b._index+1>=b._liLength&&b._moveDistance<0)&&(b._moveDistance=0),i(b,b.opts.ul,-(b._slideDistance*b._index-b._moveDistance))}function n(a){a.isScrolling||o(a),(c.ie10||c.ie11)&&(Math.abs(a._moveDistanceIE)<5&&(a.allowSlideClick=!0),setTimeout(function(){a.allowSlideClick=!0},100)),Math.abs(a._moveDistance)<=a._distance?q(a,"",".3"):a._moveDistance>a._distance?q(a,"prev",".3"):q(a,"next",".3")}function o(a){a.opts.autoSwipe&&(p(a),a.autoSlide=setInterval(function(){q(a,"next",".3")},a.opts.speed))}function p(a){clearInterval(a.autoSlide)}function q(a,b,c){"number"==typeof b?(a._index=b,a.opts.lazyLoad&&(a.opts.continuousScroll?(j(a,a._index),j(a,a._index+1),j(a,a._index+2)):(j(a,a._index-1),j(a,a._index),j(a,a._index+1)))):"next"==b?(a._index++,a.opts.lazyLoad&&(a.opts.continuousScroll?j(a,a._index+2):j(a,a._index+1))):"prev"==b&&(a._index--,a.opts.lazyLoad&&(a._index<0?j(a,a._liLength-1):a.opts.continuousScroll?j(a,a._index):j(a,a._index-1))),a.opts.continuousScroll?a._index>=a._liLength?(r(a,c),a._index=0,setTimeout(function(){r(a,0),a.opts.callback(a._index,a._liLength)},300)):a._index<0?(r(a,c),a._index=a._liLength-1,setTimeout(function(){r(a,0),a.opts.callback(a._index,a._liLength)},300)):r(a,c):(a._index>=a._liLength?a._index=0:a._index<0&&(a._index=a._liLength-1),r(a,c)),a.opts.callback(a._index,a._liLength)}function r(a,b){h(a,a.opts.ul,b),i(a,a.opts.ul,-a._index*a._slideDistance)}var f,g,c={ie10:a.navigator.msPointerEnabled,ie11:a.navigator.pointerEnabled},d=["touchstart","touchmove","touchend"],e={touch:a.Modernizr&&Modernizr.touch===!0||function(){return!!("ontouchstart"in a||a.DocumentTouch&&document instanceof DocumentTouch)}()};c.ie10&&(d=["MSPointerDown","MSPointerMove","MSPointerUp"]),c.ie11&&(d=["pointerdown","pointermove","pointerup"]),f={touchStart:d[0],touchMove:d[1],touchEnd:d[2]},b.fn.swipeSlide=function(a){return new g(this,a)},g=function(a,c){var d=this;d.$el=b(a),d._index=0,d._distance=50,d.allowSlideClick=!0,d.init(c)},g.prototype.init=function(d){function p(){var c,a=e.opts.ul.children();e._slideDistance=e.opts.axisX?e.opts.li.width():e.opts.li.height(),h(e,e.opts.ul,0),i(e,e.opts.ul,-e._slideDistance*e._index),h(e,a,0),c=e.opts.continuousScroll?-1:0,a.each(function(a){i(e,b(this),e._slideDistance*(a+c))})}var g,e=this;return e.opts=b.extend({},{ul:e.$el.children("ul"),li:e.$el.children().children("li"),continuousScroll:!1,autoSwipe:!0,speed:4e3,axisX:!0,transitionType:"ease",lazyLoad:!1,callback:function(){}},d),e._liLength=e.opts.li.length,e.isScrolling,e._liLength<=1?!1:(e.opts.lazyLoad&&(j(e,"0"),j(e,"1"),e.opts.continuousScroll&&j(e,e._liLength-1)),e.opts.continuousScroll&&e.opts.ul.prepend(e.opts.li.last().clone()).append(e.opts.li.first().clone()),p(),(c.ie10||c.ie11)&&(g="",g=e.opts.axisX?"pan-y":"none",e.$el.css({"-ms-touch-action":g,"touch-action":g}),e.$el.on("click",function(){return e.allowSlideClick})),o(e),e.opts.callback(e._index,e._liLength),e.$el.on(f.touchStart,function(a){k(a),l(a,e)}),e.$el.on(f.touchMove,function(a){k(a),m(a,e)}),e.$el.on(f.touchEnd,function(){n(e)}),e.opts.ul.on("webkitTransitionEnd MSTransitionEnd transitionend",function(){o(e)}),b(a).on("onorientationchange"in a?"orientationchange":"resize",function(){clearTimeout(e.timer),e.timer=setTimeout(p,150)}),void 0)},g.prototype.goTo=function(a){var b=this;q(b,a,".3")}}(window,window.Zepto||window.jQuery); \ No newline at end of file +!function(a,b){"use strict";function h(a,b,c){b.css({"-webkit-transition":"all "+c+"s "+a.opts.transitionType,transition:"all "+c+"s "+a.opts.transitionType})}function i(a,b,c){var d=a.opts.axisX?c+"px,0,0":"0,"+c+"px,0";b.css({"-webkit-transform":"translate3d("+d+")",transform:"translate3d("+d+")"})}function j(a,c){var d=a.opts.ul.children(),e=d.eq(c).find("[data-src]");e&&e.each(function(){var c=b(this);c.is("img")?(c.attr("src",c.data("src")),c.removeAttr("data-src")):(c.css({"background-image":"url("+c.data("src")+")"}),c.removeAttr("data-src"))})}function k(a){e.touch&&!a.touches&&(a.touches=a.originalEvent.touches)}function l(a,b){b.isScrolling=void 0,b._moveDistance=b._moveDistanceIE=0,b._startX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._startY=e.touch?a.touches[0].pageY:a.pageY||a.clientY}function m(a,b){b.opts.autoSwipe&&p(b),b.allowSlideClick=!1,b._curX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._curY=e.touch?a.touches[0].pageY:a.pageY||a.clientY,b._moveX=b._curX-b._startX,b._moveY=b._curY-b._startY,"undefined"==typeof b.isScrolling&&(b.isScrolling=b.opts.axisX?!!(Math.abs(b._moveX)>=Math.abs(b._moveY)):!!(Math.abs(b._moveY)>=Math.abs(b._moveX))),b.isScrolling&&(a.preventDefault?a.preventDefault():a.returnValue=!1,h(b,b.opts.ul,0),b._moveDistance=b._moveDistanceIE=b.opts.axisX?b._moveX:b._moveY),b.opts.continuousScroll||(0==b._index&&b._moveDistance>0||b._index+1>=b._liLength&&b._moveDistance<0)&&(b._moveDistance=0),i(b,b.opts.ul,-(b._slideDistance*b._index-b._moveDistance))}function n(a){a.isScrolling||o(a),(c.ie10||c.ie11)&&(Math.abs(a._moveDistanceIE)<5&&(a.allowSlideClick=!0),setTimeout(function(){a.allowSlideClick=!0},100)),Math.abs(a._moveDistance)<=a._distance?q(a,"",".3"):a._moveDistance>a._distance?q(a,"prev",".3"):Math.abs(a._moveDistance)>a._distance&&q(a,"next",".3"),a._moveDistance=a._moveDistanceIE=0}function o(a){a.opts.autoSwipe&&(p(a),a.autoSlide=setInterval(function(){q(a,"next",".3")},a.opts.speed))}function p(a){clearInterval(a.autoSlide)}function q(a,b,c){"number"==typeof b?(a._index=b,a.opts.lazyLoad&&(a.opts.continuousScroll?(j(a,a._index),j(a,a._index+1),j(a,a._index+2)):(j(a,a._index-1),j(a,a._index),j(a,a._index+1)))):"next"==b?(a._index++,a.opts.lazyLoad&&(a.opts.continuousScroll?(j(a,a._index+2),a._index+1==a._liLength?j(a,1):a._index==a._liLength&&j(a,0)):j(a,a._index+1))):"prev"==b&&(a._index--,a.opts.lazyLoad&&(a.opts.continuousScroll?(j(a,a._index),0==a._index?j(a,a._liLength):a._index<0&&j(a,a._liLength-1)):j(a,a._index-1))),a.opts.continuousScroll?a._index>=a._liLength?(r(a,c),a._index=0,setTimeout(function(){r(a,0),a.opts.callback(a._index,a._liLength)},300)):a._index<0?(r(a,c),a._index=a._liLength-1,setTimeout(function(){r(a,0),a.opts.callback(a._index,a._liLength)},300)):r(a,c):(a._index>=a._liLength?a._index=0:a._index<0&&(a._index=a._liLength-1),r(a,c)),a.opts.callback(a._index,a._liLength)}function r(a,b){h(a,a.opts.ul,b),i(a,a.opts.ul,-a._index*a._slideDistance)}var f,g,c={ie10:a.navigator.msPointerEnabled,ie11:a.navigator.pointerEnabled},d=["touchstart","touchmove","touchend"],e={touch:a.Modernizr&&Modernizr.touch===!0||function(){return!!("ontouchstart"in a||a.DocumentTouch&&document instanceof DocumentTouch)}()};c.ie10&&(d=["MSPointerDown","MSPointerMove","MSPointerUp"]),c.ie11&&(d=["pointerdown","pointermove","pointerup"]),f={touchStart:d[0],touchMove:d[1],touchEnd:d[2]},b.fn.swipeSlide=function(a){return new g(this,a)},g=function(a,c){var d=this;d.$el=b(a),d._distance=50,d.allowSlideClick=!0,d.init(c)},g.prototype.init=function(d){function p(){var c,a=e.opts.ul.children();e._slideDistance=e.opts.axisX?e.opts.li.width():e.opts.li.height(),h(e,e.opts.ul,0),i(e,e.opts.ul,-e._slideDistance*e._index),h(e,a,0),c=e.opts.continuousScroll?-1:0,a.each(function(a){i(e,b(this),e._slideDistance*(a+c))})}var g,e=this;return e.opts=b.extend({},{ul:e.$el.children("ul"),li:e.$el.children().children("li"),index:0,continuousScroll:!1,autoSwipe:!0,speed:4e3,axisX:!0,transitionType:"ease",lazyLoad:!1,callback:function(){}},d),e._index=e.opts.index,e._liLength=e.opts.li.length,e.isScrolling,e._liLength<=1?!1:(e.opts.continuousScroll&&e.opts.ul.prepend(e.opts.li.last().clone()).append(e.opts.li.first().clone()),e.opts.lazyLoad&&(j(e,e._index),e.opts.continuousScroll?(j(e,e._index+1),j(e,e._index+2),0==e._index?j(e,e._liLength):e._index+1==e._liLength&&j(e,1)):j(e,e._index+1==e._liLength?e._liLength-2:e._index+1)),p(),(c.ie10||c.ie11)&&(g="",g=e.opts.axisX?"pan-y":"none",e.$el.css({"-ms-touch-action":g,"touch-action":g}),e.$el.on("click",function(){return e.allowSlideClick})),o(e),e.opts.callback(e._index,e._liLength),e.$el.on(f.touchStart,function(a){k(a),l(a,e)}),e.$el.on(f.touchMove,function(a){k(a),m(a,e)}),e.$el.on(f.touchEnd,function(){n(e)}),e.opts.ul.on("webkitTransitionEnd MSTransitionEnd transitionend",function(){o(e)}),b(a).on("onorientationchange"in a?"orientationchange":"resize",function(){clearTimeout(e.timer),e.timer=setTimeout(p,150)}),void 0)},g.prototype.goTo=function(a){var b=this;q(b,a,".3")}}(window,window.Zepto||window.jQuery); \ No newline at end of file From a8378549365ef71d7521eeb0d310cbd46cb0a37d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A5=BF=E9=97=A8?= <1745745@qq.com> Date: Mon, 27 Apr 2015 10:53:03 +0800 Subject: [PATCH 16/16] 3.3.1 --- Changelog.md | 4 ++++ README.md | 5 ++--- index.html | 1 + js/swipeSlide.js | 13 ++++++++----- js/swipeSlide.min.js | 4 ++-- 5 files changed, 17 insertions(+), 10 deletions(-) diff --git a/Changelog.md b/Changelog.md index b8cb244..916b3c5 100644 --- a/Changelog.md +++ b/Changelog.md @@ -1,3 +1,7 @@ +### 3.3.1(150427) + +* 修复只有1个轮播时不执行lazyLoad和callback + ### 3.3.0(150424) * 增加轮播初始值index参数 diff --git a/README.md b/README.md index e7c2b8c..19c5252 100644 --- a/README.md +++ b/README.md @@ -53,10 +53,9 @@ $('.element').swipeSlide({ ## 最新版本 -### 3.3.0(150424) +### 3.3.1(150427) -* 增加轮播初始值index参数 -* 修复点击触发轮播滚动 +* 修复只有1个轮播时不执行lazyLoad和callback [所有更新日志](Changelog.md) diff --git a/index.html b/index.html index 26ac528..1a55899 100644 --- a/index.html +++ b/index.html @@ -64,6 +64,7 @@ position: absolute; right: 10px; bottom: 10px; + z-index: 5; font-size: 0; } .slide .dot span{ diff --git a/js/swipeSlide.js b/js/swipeSlide.js index e8df1fc..4f1caf6 100644 --- a/js/swipeSlide.js +++ b/js/swipeSlide.js @@ -2,7 +2,7 @@ * swipeSlide * http://ons.me/500.html * 西门 - * 3.3.0(150424) + * 3.3.1(150427) */ ;(function(win,$){ 'use strict'; @@ -65,8 +65,14 @@ me._liLength = me.opts.li.length; me.isScrolling; + // 回调 + me.opts.callback(me._index,me._liLength); + // 如果轮播小于等于1个,跳出 - if(me._liLength <= 1) return false; + if(me._liLength <= 1){ + if(me.opts.lazyLoad) fnLazyLoad(me, 0); + return false; + } // 连续滚动,复制dom if(me.opts.continuousScroll) me.opts.ul.prepend(me.opts.li.last().clone()).append(me.opts.li.first().clone()); @@ -111,9 +117,6 @@ // 调用轮播 fnAutoSlide(me); - // 回调 - me.opts.callback(me._index,me._liLength); - // 绑定触摸 me.$el.on(touchEvents.touchStart,function(e){ fnTouches(e); diff --git a/js/swipeSlide.min.js b/js/swipeSlide.min.js index dbf65d2..c3f390d 100644 --- a/js/swipeSlide.min.js +++ b/js/swipeSlide.min.js @@ -2,6 +2,6 @@ * swipeSlide * http://ons.me/500.html * 西门 - * 3.3.0(150424) + * 3.3.1(150427) */ -!function(a,b){"use strict";function h(a,b,c){b.css({"-webkit-transition":"all "+c+"s "+a.opts.transitionType,transition:"all "+c+"s "+a.opts.transitionType})}function i(a,b,c){var d=a.opts.axisX?c+"px,0,0":"0,"+c+"px,0";b.css({"-webkit-transform":"translate3d("+d+")",transform:"translate3d("+d+")"})}function j(a,c){var d=a.opts.ul.children(),e=d.eq(c).find("[data-src]");e&&e.each(function(){var c=b(this);c.is("img")?(c.attr("src",c.data("src")),c.removeAttr("data-src")):(c.css({"background-image":"url("+c.data("src")+")"}),c.removeAttr("data-src"))})}function k(a){e.touch&&!a.touches&&(a.touches=a.originalEvent.touches)}function l(a,b){b.isScrolling=void 0,b._moveDistance=b._moveDistanceIE=0,b._startX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._startY=e.touch?a.touches[0].pageY:a.pageY||a.clientY}function m(a,b){b.opts.autoSwipe&&p(b),b.allowSlideClick=!1,b._curX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._curY=e.touch?a.touches[0].pageY:a.pageY||a.clientY,b._moveX=b._curX-b._startX,b._moveY=b._curY-b._startY,"undefined"==typeof b.isScrolling&&(b.isScrolling=b.opts.axisX?!!(Math.abs(b._moveX)>=Math.abs(b._moveY)):!!(Math.abs(b._moveY)>=Math.abs(b._moveX))),b.isScrolling&&(a.preventDefault?a.preventDefault():a.returnValue=!1,h(b,b.opts.ul,0),b._moveDistance=b._moveDistanceIE=b.opts.axisX?b._moveX:b._moveY),b.opts.continuousScroll||(0==b._index&&b._moveDistance>0||b._index+1>=b._liLength&&b._moveDistance<0)&&(b._moveDistance=0),i(b,b.opts.ul,-(b._slideDistance*b._index-b._moveDistance))}function n(a){a.isScrolling||o(a),(c.ie10||c.ie11)&&(Math.abs(a._moveDistanceIE)<5&&(a.allowSlideClick=!0),setTimeout(function(){a.allowSlideClick=!0},100)),Math.abs(a._moveDistance)<=a._distance?q(a,"",".3"):a._moveDistance>a._distance?q(a,"prev",".3"):Math.abs(a._moveDistance)>a._distance&&q(a,"next",".3"),a._moveDistance=a._moveDistanceIE=0}function o(a){a.opts.autoSwipe&&(p(a),a.autoSlide=setInterval(function(){q(a,"next",".3")},a.opts.speed))}function p(a){clearInterval(a.autoSlide)}function q(a,b,c){"number"==typeof b?(a._index=b,a.opts.lazyLoad&&(a.opts.continuousScroll?(j(a,a._index),j(a,a._index+1),j(a,a._index+2)):(j(a,a._index-1),j(a,a._index),j(a,a._index+1)))):"next"==b?(a._index++,a.opts.lazyLoad&&(a.opts.continuousScroll?(j(a,a._index+2),a._index+1==a._liLength?j(a,1):a._index==a._liLength&&j(a,0)):j(a,a._index+1))):"prev"==b&&(a._index--,a.opts.lazyLoad&&(a.opts.continuousScroll?(j(a,a._index),0==a._index?j(a,a._liLength):a._index<0&&j(a,a._liLength-1)):j(a,a._index-1))),a.opts.continuousScroll?a._index>=a._liLength?(r(a,c),a._index=0,setTimeout(function(){r(a,0),a.opts.callback(a._index,a._liLength)},300)):a._index<0?(r(a,c),a._index=a._liLength-1,setTimeout(function(){r(a,0),a.opts.callback(a._index,a._liLength)},300)):r(a,c):(a._index>=a._liLength?a._index=0:a._index<0&&(a._index=a._liLength-1),r(a,c)),a.opts.callback(a._index,a._liLength)}function r(a,b){h(a,a.opts.ul,b),i(a,a.opts.ul,-a._index*a._slideDistance)}var f,g,c={ie10:a.navigator.msPointerEnabled,ie11:a.navigator.pointerEnabled},d=["touchstart","touchmove","touchend"],e={touch:a.Modernizr&&Modernizr.touch===!0||function(){return!!("ontouchstart"in a||a.DocumentTouch&&document instanceof DocumentTouch)}()};c.ie10&&(d=["MSPointerDown","MSPointerMove","MSPointerUp"]),c.ie11&&(d=["pointerdown","pointermove","pointerup"]),f={touchStart:d[0],touchMove:d[1],touchEnd:d[2]},b.fn.swipeSlide=function(a){return new g(this,a)},g=function(a,c){var d=this;d.$el=b(a),d._distance=50,d.allowSlideClick=!0,d.init(c)},g.prototype.init=function(d){function p(){var c,a=e.opts.ul.children();e._slideDistance=e.opts.axisX?e.opts.li.width():e.opts.li.height(),h(e,e.opts.ul,0),i(e,e.opts.ul,-e._slideDistance*e._index),h(e,a,0),c=e.opts.continuousScroll?-1:0,a.each(function(a){i(e,b(this),e._slideDistance*(a+c))})}var g,e=this;return e.opts=b.extend({},{ul:e.$el.children("ul"),li:e.$el.children().children("li"),index:0,continuousScroll:!1,autoSwipe:!0,speed:4e3,axisX:!0,transitionType:"ease",lazyLoad:!1,callback:function(){}},d),e._index=e.opts.index,e._liLength=e.opts.li.length,e.isScrolling,e._liLength<=1?!1:(e.opts.continuousScroll&&e.opts.ul.prepend(e.opts.li.last().clone()).append(e.opts.li.first().clone()),e.opts.lazyLoad&&(j(e,e._index),e.opts.continuousScroll?(j(e,e._index+1),j(e,e._index+2),0==e._index?j(e,e._liLength):e._index+1==e._liLength&&j(e,1)):j(e,e._index+1==e._liLength?e._liLength-2:e._index+1)),p(),(c.ie10||c.ie11)&&(g="",g=e.opts.axisX?"pan-y":"none",e.$el.css({"-ms-touch-action":g,"touch-action":g}),e.$el.on("click",function(){return e.allowSlideClick})),o(e),e.opts.callback(e._index,e._liLength),e.$el.on(f.touchStart,function(a){k(a),l(a,e)}),e.$el.on(f.touchMove,function(a){k(a),m(a,e)}),e.$el.on(f.touchEnd,function(){n(e)}),e.opts.ul.on("webkitTransitionEnd MSTransitionEnd transitionend",function(){o(e)}),b(a).on("onorientationchange"in a?"orientationchange":"resize",function(){clearTimeout(e.timer),e.timer=setTimeout(p,150)}),void 0)},g.prototype.goTo=function(a){var b=this;q(b,a,".3")}}(window,window.Zepto||window.jQuery); \ No newline at end of file +!function(a,b){"use strict";function h(a,b,c){b.css({"-webkit-transition":"all "+c+"s "+a.opts.transitionType,transition:"all "+c+"s "+a.opts.transitionType})}function i(a,b,c){var d=a.opts.axisX?c+"px,0,0":"0,"+c+"px,0";b.css({"-webkit-transform":"translate3d("+d+")",transform:"translate3d("+d+")"})}function j(a,c){var d=a.opts.ul.children(),e=d.eq(c).find("[data-src]");e&&e.each(function(){var c=b(this);c.is("img")?(c.attr("src",c.data("src")),c.removeAttr("data-src")):(c.css({"background-image":"url("+c.data("src")+")"}),c.removeAttr("data-src"))})}function k(a){e.touch&&!a.touches&&(a.touches=a.originalEvent.touches)}function l(a,b){b.isScrolling=void 0,b._moveDistance=b._moveDistanceIE=0,b._startX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._startY=e.touch?a.touches[0].pageY:a.pageY||a.clientY}function m(a,b){b.opts.autoSwipe&&p(b),b.allowSlideClick=!1,b._curX=e.touch?a.touches[0].pageX:a.pageX||a.clientX,b._curY=e.touch?a.touches[0].pageY:a.pageY||a.clientY,b._moveX=b._curX-b._startX,b._moveY=b._curY-b._startY,"undefined"==typeof b.isScrolling&&(b.isScrolling=b.opts.axisX?!!(Math.abs(b._moveX)>=Math.abs(b._moveY)):!!(Math.abs(b._moveY)>=Math.abs(b._moveX))),b.isScrolling&&(a.preventDefault?a.preventDefault():a.returnValue=!1,h(b,b.opts.ul,0),b._moveDistance=b._moveDistanceIE=b.opts.axisX?b._moveX:b._moveY),b.opts.continuousScroll||(0==b._index&&b._moveDistance>0||b._index+1>=b._liLength&&b._moveDistance<0)&&(b._moveDistance=0),i(b,b.opts.ul,-(b._slideDistance*b._index-b._moveDistance))}function n(a){a.isScrolling||o(a),(c.ie10||c.ie11)&&(Math.abs(a._moveDistanceIE)<5&&(a.allowSlideClick=!0),setTimeout(function(){a.allowSlideClick=!0},100)),Math.abs(a._moveDistance)<=a._distance?q(a,"",".3"):a._moveDistance>a._distance?q(a,"prev",".3"):Math.abs(a._moveDistance)>a._distance&&q(a,"next",".3"),a._moveDistance=a._moveDistanceIE=0}function o(a){a.opts.autoSwipe&&(p(a),a.autoSlide=setInterval(function(){q(a,"next",".3")},a.opts.speed))}function p(a){clearInterval(a.autoSlide)}function q(a,b,c){"number"==typeof b?(a._index=b,a.opts.lazyLoad&&(a.opts.continuousScroll?(j(a,a._index),j(a,a._index+1),j(a,a._index+2)):(j(a,a._index-1),j(a,a._index),j(a,a._index+1)))):"next"==b?(a._index++,a.opts.lazyLoad&&(a.opts.continuousScroll?(j(a,a._index+2),a._index+1==a._liLength?j(a,1):a._index==a._liLength&&j(a,0)):j(a,a._index+1))):"prev"==b&&(a._index--,a.opts.lazyLoad&&(a.opts.continuousScroll?(j(a,a._index),0==a._index?j(a,a._liLength):a._index<0&&j(a,a._liLength-1)):j(a,a._index-1))),a.opts.continuousScroll?a._index>=a._liLength?(r(a,c),a._index=0,setTimeout(function(){r(a,0),a.opts.callback(a._index,a._liLength)},300)):a._index<0?(r(a,c),a._index=a._liLength-1,setTimeout(function(){r(a,0),a.opts.callback(a._index,a._liLength)},300)):r(a,c):(a._index>=a._liLength?a._index=0:a._index<0&&(a._index=a._liLength-1),r(a,c)),a.opts.callback(a._index,a._liLength)}function r(a,b){h(a,a.opts.ul,b),i(a,a.opts.ul,-a._index*a._slideDistance)}var f,g,c={ie10:a.navigator.msPointerEnabled,ie11:a.navigator.pointerEnabled},d=["touchstart","touchmove","touchend"],e={touch:a.Modernizr&&Modernizr.touch===!0||function(){return!!("ontouchstart"in a||a.DocumentTouch&&document instanceof DocumentTouch)}()};c.ie10&&(d=["MSPointerDown","MSPointerMove","MSPointerUp"]),c.ie11&&(d=["pointerdown","pointermove","pointerup"]),f={touchStart:d[0],touchMove:d[1],touchEnd:d[2]},b.fn.swipeSlide=function(a){return new g(this,a)},g=function(a,c){var d=this;d.$el=b(a),d._distance=50,d.allowSlideClick=!0,d.init(c)},g.prototype.init=function(d){function p(){var c,a=e.opts.ul.children();e._slideDistance=e.opts.axisX?e.opts.li.width():e.opts.li.height(),h(e,e.opts.ul,0),i(e,e.opts.ul,-e._slideDistance*e._index),h(e,a,0),c=e.opts.continuousScroll?-1:0,a.each(function(a){i(e,b(this),e._slideDistance*(a+c))})}var g,e=this;return e.opts=b.extend({},{ul:e.$el.children("ul"),li:e.$el.children().children("li"),index:0,continuousScroll:!1,autoSwipe:!0,speed:4e3,axisX:!0,transitionType:"ease",lazyLoad:!1,callback:function(){}},d),e._index=e.opts.index,e._liLength=e.opts.li.length,e.isScrolling,e.opts.callback(e._index,e._liLength),e._liLength<=1?(e.opts.lazyLoad&&j(e,0),!1):(e.opts.continuousScroll&&e.opts.ul.prepend(e.opts.li.last().clone()).append(e.opts.li.first().clone()),e.opts.lazyLoad&&(j(e,e._index),e.opts.continuousScroll?(j(e,e._index+1),j(e,e._index+2),0==e._index?j(e,e._liLength):e._index+1==e._liLength&&j(e,1)):j(e,e._index+1==e._liLength?e._liLength-2:e._index+1)),p(),(c.ie10||c.ie11)&&(g="",g=e.opts.axisX?"pan-y":"none",e.$el.css({"-ms-touch-action":g,"touch-action":g}),e.$el.on("click",function(){return e.allowSlideClick})),o(e),e.$el.on(f.touchStart,function(a){k(a),l(a,e)}),e.$el.on(f.touchMove,function(a){k(a),m(a,e)}),e.$el.on(f.touchEnd,function(){n(e)}),e.opts.ul.on("webkitTransitionEnd MSTransitionEnd transitionend",function(){o(e)}),b(a).on("onorientationchange"in a?"orientationchange":"resize",function(){clearTimeout(e.timer),e.timer=setTimeout(p,150)}),void 0)},g.prototype.goTo=function(a){var b=this;q(b,a,".3")}}(window,window.Zepto||window.jQuery); \ No newline at end of file