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] 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