From e9bfda1eb57ae47a30d0f75fcb6873b8448bc278 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A5=BF=E9=97=A8?= <1745745@qq.com> Date: Fri, 13 Mar 2015 17:52:53 +0800 Subject: [PATCH] 3.1.0 --- Changelog.md | 5 ++ README.md | 7 +- index.html | 175 ++++++++++++++++++++++++++++++++++++++++++- js/swipeSlide.js | 63 +++++++++++----- js/swipeSlide.min.js | 4 +- 5 files changed, 230 insertions(+), 24 deletions(-) diff --git a/Changelog.md b/Changelog.md index da8a854..789a307 100644 --- a/Changelog.md +++ b/Changelog.md @@ -1,3 +1,8 @@ +### 3.1.0(150313) + +* 支持指定索引值、前一屏、后一屏轮播 +* 修复一屏内多图懒加载bug + ### 3.0.0(150227) * 重构js diff --git a/README.md b/README.md index 39f2768..7afa996 100644 --- a/README.md +++ b/README.md @@ -21,10 +21,9 @@ Zepto 或者 jQuery ## 最新版本 -### 3.0.0(150227) +### 3.1.0(150313) -* 重构js -* 支持resize -* 修改回调callback写法 +* 支持指定索引值、前一屏、后一屏轮播 +* 修复一屏内多图懒加载bug [所有更新日志](Changelog.md) \ No newline at end of file diff --git a/index.html b/index.html index 35c0a83..627bcab 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,9 @@ /* 缩放网页，文字大小不变 */ -webkit-text-size-adjust:none; } +body{ + font-size: 14px; +} h1{ font-size: 16px; } @@ -22,7 +25,7 @@ position: relative; max-width: 640px; overflow: hidden; - margin: 10px auto; + margin: 20px auto; } .slide:after{ content: ''; @@ -78,6 +81,81 @@ #slide1{ 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%; +} @@ -175,19 +253,95 @@

swipeSlide for Zepto/jQuery +
+
+ 左 +
+ 1 + 2 + 3 + 4 +
+ 右 +
+
+ +
+
+ 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