/** Swipe 1.0** Brad Birdsall, Prime* Copyright 2011, Licensed GPL & MIT**/; window . Swipe = function ( element , options ) {// return immediately if element doesn't existif ( ! element ) return null ;var _this = this ;// retreive optionsthis . options = options || {};this . index = this . options . startSlide || 0 ;this . speed = this . options . speed || 300 ;this . callback = this . options . callback || function () {};this . delay = this . options . auto || 0 ;// reference dom elementsthis . container = element ;this . element = this . container . children [ 0 ]; // the slide pane// static cssthis . container . style . overflow = 'hidden' ;this . element . style . listStyle = 'none' ;this . element . style . margin = 0 ;// trigger slider initializationthis . setup ();// begin auto slideshowthis . begin ();// add event listenersif ( this . element . addEventListener ) {this . element . addEventListener ( 'touchstart' , this , false );this . element . addEventListener ( 'touchmove' , this , false );this . element . addEventListener ( 'touchend' , this , false );this . element . addEventListener ( 'touchcancel' , this , false );this . element . addEventListener ( 'webkitTransitionEnd' , this , false );this . element . addEventListener ( 'msTransitionEnd' , this , false );this . element . addEventListener ( 'oTransitionEnd' , this , false );this . element . addEventListener ( 'transitionend' , this , false );window . addEventListener ( 'resize' , this , false );}};Swipe . prototype = {setup : function () {// get and measure amt of slidesthis . slides = this . element . children ;this . length = this . slides . length ;// return immediately if their are less than two slidesif ( this . length < 2 ) return null ;// determine width of each slidethis . width = Math . ceil (( "getBoundingClientRect" in this . container ) ? this . container . getBoundingClientRect (). width : this . container . offsetWidth );// Fix width for Android WebView (i.e. PhoneGap)if ( this . width === 0 && typeof window . getComputedStyle === 'function' ) {this . width = window . getComputedStyle ( this . container , null ). width . replace ( 'px' , '' );}// return immediately if measurement failsif ( ! this . width ) return null ;// hide slider element but keep positioning during setupvar origVisibility = this . container . style . visibility ;this . container . style . visibility = 'hidden' ;// dynamic cssthis . element . style . width = Math . ceil ( this . slides . length * this . width ) + 'px' ;var index = this . slides . length ;while ( index -- ) {var el = this . slides [ index ];el . style . width = this . width + 'px' ;el . style . display = 'table-cell' ;el . style . verticalAlign = 'top' ;}// set start position and force translate to remove initial flickeringthis . slide ( this . index , 0 );// restore the visibility of the slider elementthis . container . style . visibility = origVisibility ;},slide : function ( index , duration ) {var style = this . element . style ;// fallback to default speedif ( duration == undefined ) {duration = this . speed ;}// set duration speed (0 represents 1-to-1 scrolling)style . webkitTransitionDuration = style . MozTransitionDuration = style . msTransitionDuration = style . OTransitionDuration = style . transitionDuration = duration + 'ms' ;// translate to given index positionstyle . MozTransform = style . webkitTransform = 'translate3d(' + - ( index * this . width ) + 'px,0,0)' ;style . msTransform = style . OTransform = 'translateX(' + - ( index * this . width ) + 'px)' ;// set new index to allow for expression argumentsthis . index = index ;},getPos : function () {// return current index positionreturn this . index ;},prev : function ( delay ) {// cancel next scheduled automatic transition, if anythis . delay = delay || 0 ;clearTimeout ( this . interval );if ( this . index ) this . slide ( this . index - 1 , this . speed ); // if not at first slideelse this . slide ( this . length - 1 , this . speed ); //if first slide return to end},next : function ( delay ) {// cancel next scheduled automatic transition, if anythis . delay = delay || 0 ;clearTimeout ( this . interval );if ( this . index < this . length - 1 ) this . slide ( this . index + 1 , this . speed ); // if not last slideelse this . slide ( 0 , this . speed ); //if last slide return to start},begin : function () {var _this = this ;this . interval = ( this . delay )? setTimeout ( function () {_this . next ( _this . delay );}, this . delay ): 0 ;},stop : function () {this . delay = 0 ;clearTimeout ( this . interval );},resume : function () {this . delay = this . options . auto || 0 ;this . begin ();},handleEvent : function ( e ) {switch ( e . type ) {case 'touchstart' : this . onTouchStart ( e ); break ;case 'touchmove' : this . onTouchMove ( e ); break ;case 'touchcancel' :case 'touchend' : this . onTouchEnd ( e ); break ;case 'webkitTransitionEnd' :case 'msTransitionEnd' :case 'oTransitionEnd' :case 'transitionend' : this . transitionEnd ( e ); break ;case 'resize' : this . setup (); break ;}},transitionEnd : function ( e ) {if ( this . delay ) this . begin ();this . callback ( e , this . index , this . slides [ this . index ]);},onTouchStart : function ( e ) {this . start = {// get touch coordinates for delta calculations in onTouchMovepageX : e . touches [ 0 ]. pageX ,pageY : e . touches [ 0 ]. pageY ,// set initial timestamp of touch sequencetime : Number ( new Date () )};// used for testing first onTouchMove eventthis . isScrolling = undefined ;// reset deltaXthis . deltaX = 0 ;// set transition time to 0 for 1-to-1 touch movementthis . element . style . MozTransitionDuration = this . element . style . webkitTransitionDuration = 0 ;e . stopPropagation ();},onTouchMove : function ( e ) {// ensure swiping with one touch and not pinchingif ( e . touches . length > 1 || e . scale && e . scale !== 1 ) return ;this . deltaX = e . touches [ 0 ]. pageX - this . start . pageX ;// determine if scrolling test has run - one time testif ( typeof this . isScrolling == 'undefined' ) {this . isScrolling = !! ( this . isScrolling || Math . abs ( this . deltaX ) < Math . abs ( e . touches [ 0 ]. pageY - this . start . pageY ) );}// if user is not trying to scroll verticallyif ( ! this . isScrolling ) {// prevent native scrollinge . preventDefault ();// cancel slideshowclearTimeout ( this . interval );// increase resistance if first or last slidethis . deltaX =this . deltaX /( ( ! this . index && this . deltaX > 0 // if first slide and sliding left|| this . index == this . length - 1 // or if last slide and sliding right&& this . deltaX < 0 // and if sliding at all) ?( Math . abs ( this . deltaX ) / this . width + 1 ) // determine resistance level: 1 ); // no resistance if false// translate immediately 1-to-1this . element . style . MozTransform = this . element . style . webkitTransform = 'translate3d(' + ( this . deltaX - this . index * this . width ) + 'px,0,0)' ;e . stopPropagation ();}},onTouchEnd : function ( e ) {// determine if slide attempt triggers next/prev slidevar isValidSlide =Number ( new Date ()) - this . start . time < 250 // if slide duration is less than 250ms&& Math . abs ( this . deltaX ) > 20 // and if slide amt is greater than 20px|| Math . abs ( this . deltaX ) > this . width / 2 , // or if slide amt is greater than half the width// determine if slide attempt is past start and endisPastBounds =! this . index && this . deltaX > 0 // if first slide and slide amt is greater than 0|| this . index == this . length - 1 && this . deltaX < 0 ; // or if last slide and slide amt is less than 0// if not scrolling verticallyif ( ! this . isScrolling ) {// call slide function with slide end value based on isValidSlide and isPastBounds teststhis . slide ( this . index + ( isValidSlide && ! isPastBounds ? ( this . deltaX < 0 ? 1 : - 1 ) : 0 ), this . speed );}e . stopPropagation ();}};
633
07-17
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
