我在JS文件中有以下功能：
// publicc methos: pauses the slideshow
pause : function() {
if( this.isPlaying ) {
this._stopSlideshow();
}
如何从其他JS文件中调用此函数？
*的 更新 *
插件JS文件：
;( function( $, window, undefined ) {
'use strict';
var $event = $.event,
$special,
resizeTimeout;
$special = $event.special.debouncedresize = {
setup: function() {
$( this ).on( "resize", $special.handler );
},
teardown: function() {
$( this ).off( "resize", $special.handler );
},
handler: function( event, execAsap ) {
// Save the context
var context = this,
args = arguments,
dispatch = function() {
// set correct event type
event.type = "debouncedresize";
$event.dispatch.apply( context, args );
};
if ( resizeTimeout ) {
clearTimeout( resizeTimeout );
}
execAsap ?
dispatch() :
resizeTimeout = setTimeout( dispatch, $special.threshold );
},
threshold: 50
};
// ======================= imagesLoaded Plugin ===============================
// https://github.com/desandro/imagesloaded
// $('#my-container').imagesLoaded(myFunction)
// execute a callback when all images have loaded.
// needed because .load() doesn't work on cached images
// callback function gets image collection as argument
// this is the container
// original: mit license. paul irish. 2010.
// contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou
// blank image data-uri bypasses webkit log warning (thx doug jones)
var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
$.fn.imagesLoaded = function( callback ) {
var $this = this,
deferred = $.isFunction($.Deferred) ? $.Deferred() : 0,
hasNotify = $.isFunction(deferred.notify),
$images = $this.find('img').add( $this.filter('img') ),
loaded = [],
proper = [],
broken = [];
// Register deferred callbacks
if ($.isPlainObject(callback)) {
$.each(callback, function (key, value) {
if (key === 'callback') {
callback = value;
} else if (deferred) {
deferred[key](value);
}
});
}
function doneLoading() {
var $proper = $(proper),
$broken = $(broken);
if ( deferred ) {
if ( broken.length ) {
deferred.reject( $images, $proper, $broken );
} else {
deferred.resolve( $images );
}
}
if ( $.isFunction( callback ) ) {
callback.call( $this, $images, $proper, $broken );
}
}
function imgLoaded( img, isBroken ) {
// don't proceed if BLANK image, or image is already loaded
if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) {
return;
}
// store element in loaded images array
loaded.push( img );
// keep track of broken and properly loaded images
if ( isBroken ) {
broken.push( img );
} else {
proper.push( img );
}
// cache image and its state for future calls
$.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } );
// trigger deferred progress method if present
if ( hasNotify ) {
deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] );
}
// call doneLoading and clean listeners if all images are loaded
if ( $images.length === loaded.length ){
setTimeout( doneLoading );
$images.unbind( '.imagesLoaded' );
}
}
// if no images, trigger immediately
if ( !$images.length ) {
doneLoading();
} else {
$images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){
// trigger imgLoaded
imgLoaded( event.target, event.type === 'error' );
}).each( function( i, el ) {
var src = el.src;
// find out if this image has been already checked for status
// if it was, and src has not changed, call imgLoaded on it
var cached = $.data( el, 'imagesLoaded' );
if ( cached && cached.src === src ) {
imgLoaded( el, cached.isBroken );
return;
}
// if complete is true and browser supports natural sizes, try
// to check for image status manually
if ( el.complete && el.naturalWidth !== undefined ) {
imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 );
return;
}
// cached images don't fire load sometimes, so we reset src, but only when
// dealing with IE, or image is complete (loaded) and failed manual check
// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
if ( el.readyState || el.complete ) {
el.src = BLANK;
el.src = src;
}
});
}
return deferred ? deferred.promise( $this ) : $this;
};
// global
var $window = $( window ),
Modernizr = window.Modernizr;
$.Slicebox = function( options, element ) {
this.$el = $( element );
this._init( options );
};
$.Slicebox.defaults = {
// (v)ertical, (h)orizontal or (r)andom
orientation : 'v',
// perspective value
perspective : 1200,
// number of slices / cuboids
// needs to be an odd number 15 => number > 0 (if you want the limit higher, change the _validate function).
cuboidsCount : 5,
// if true then the number of slices / cuboids is going to be random (cuboidsCount is overwitten)
cuboidsRandom : false,
// the range of possible number of cuboids if cuboidsRandom is true
// it is strongly recommended that you do not set a very large number :)
maxCuboidsCount : 5,
// each cuboid will move x pixels left / top (depending on orientation). The middle cuboid doesn't move. the middle cuboid's neighbors will move disperseFactor pixels
disperseFactor : 0,
// color of the hidden sides
colorHiddenSides : '#222',
// the animation will start from left to right. The left most cuboid will be the first one to rotate
// this is the interval between each rotation in ms
sequentialFactor : 150,
// animation speed
// this is the speed that takes "1" cuboid to rotate
speed : 600,
// transition easing
easing : 'ease',
// if true the slicebox will start the animation automatically
autoplay : false,
// time (ms) between each rotation, if autoplay is true
interval: 3000,
// the fallback will just fade out / fade in the items
// this is the time fr the fade effect
fallbackFadeSpeed : 300,
// callbacks
onBeforeChange : function( position ) { return false; },
onAfterChange : function( position ) { return false; },
onReady : function() { return false; }
};
$.Slicebox.prototype = {
_init : function( options ) {
// options
this.options = $.extend( true, {}, $.Slicebox.defaults, options );
this._validate();
// all the items
this.$items = this.$el.children( 'li' );
// total number of items
this.itemsCount = this.$items.length;
// if there's no items return
if(this.itemsCount === 0 ) {
return false;
};
// suport for css 3d transforms and css transitions
this.support = Modernizr.csstransitions && Modernizr.csstransforms3d;
// current image index
this.current = 0;
// control if the slicebox is animating
this.isAnimating = false;
// control if slicebox is ready (all images loaded)
this.isReady = false;
// preload the images
var self = this;
this.$el.imagesLoaded( function() {
// we need to hide the items except first one (current default value)
var $current = self.$items.eq( self.current ).css( 'display', 'block' ).addClass( 'sb-current' );
// get real size of image
var i = new Image();
i.src = $current.find( 'img' ).attr( 'src' );
self.realWidth = i.width;
// assuming all images with same size
self._setSize();
self._setStyle();
self._initEvents();
self.options.onReady();
self.isReady = true;
if( self.options.autoplay ) {
self._startSlideshow();
}
});
},
_validate : function( options ) {
if( this.options.cuboidsCount < 0 ){
this.options.cuboidsCount = 1;
}
else if( this.options.cuboidsCount > 15 ) {
this.options.cuboidsCount = 15;
}
else if( this.options.cuboidsCount %2 === 0 ) {
++this.options.cuboidsCount;
}
if( this.options.maxCuboidsCount < 0 ){
this.options.maxCuboidsCount = 1;
}
else if( this.options.maxCuboidsCount > 15 ) {
this.options.maxCuboidsCount = 15;
}
else if( this.options.maxCuboidsCount %2 === 0 ) {
++this.options.maxCuboidsCount;
}
if( this.options.disperseFactor < 0 ) {
this.options.disperseFactor = 0;
}
if( this.options.orientation !== 'v' && this.options.orientation !== 'h' && this.options.orientation !== 'r' ) {
this.options.orientation = 'v';
}
},
_setSize : function() {
var $visible = this.$items.eq( this.current ).find( 'img' );
this.size = {
width : $visible.width(),
height : $visible.height()
};
},
_setStyle : function() {
// max-width is the real size of the images
this.$el.css( {
'max-width' : this.realWidth
} );
},
_initEvents : function() {
var self = this;
$window.on( 'debouncedresize.slicebox', function( event ) {
// assuming all images with same size
self._setSize();
} );
},
_startSlideshow: function() {
var self = this;
this.slideshow = setTimeout( function() {
self._navigate( 'next' );
if ( self.options.autoplay ) {
self._startSlideshow();
}
}, this.options.interval );
},
_stopSlideshow: function() {
if ( this.options.autoplay ) {
clearTimeout( this.slideshow );
this.isPlaying = false;
this.options.autoplay = false;
}
},
_navigate : function( dir, pos ) {
if( this.isAnimating || !this.isReady || this.itemsCount < 2 ) {
return false;
}
this.isAnimating = true;
// current item's index
this.prev = this.current;
// if position is passed
if( pos !== undefined ) {
this.current = pos;
}
// if not check the boundaries
else if( dir === 'next' ) {
this.current = this.current < this.itemsCount - 1 ? this.current + 1 : 0;
}
else if( dir === 'prev' ) {
this.current = this.current > 0 ? this.current - 1 : this.itemsCount - 1;
}
// callback trigger
this.options.onBeforeChange( this.current );
if( !this.support ) {
this._fade( dir );
}
else {
this._layout( dir );
this._rotate();
}
},
_fade : function( dir ) {
var self = this,
$visible = this.$items.eq( this.prev ),
h = $visible.find( 'img' ).height();
this.$el.css( 'height', h );
this.$items.css( 'position', 'absolute' );
this.$items.eq( this.current ).fadeIn( this.options.fallbackFadeSpeed, function() {
$( this ).css( 'display', 'block' ).addClass( 'sb-current' );
self.$el.css( 'height', 'auto' );
self.$items.css( 'position', 'relative' );
self.isAnimating = false;
} );
self.$items.eq( self.prev ).removeClass( 'sb-current' ).fadeOut( this.options.fallbackFadeSpeed );
},
_layout : function( dir ) {
// create a structure like this and append it to the main container (this.$el):
// <div> wrapper with perspective
// <div>
// <div></div> front side
// <div></div> back side
// <div></div> right side
// <div></div> left side
// <div></div> top side
// <div></div> bottom side
// </div>
// <div>..</div>
// <div>..</div>
// <div>..</div>
// ... number of slices defined in options
// </div>
var orientation = this.options.orientation;
if( orientation === 'r' ) {
orientation = Math.floor( Math.random() * 2 ) === 0 ? 'v' : 'h';
}
if( this.options.cuboidsRandom ) {
this.options.cuboidsCount = Math.floor( Math.random() * this.options.maxCuboidsCount + 1 );
}
this._validate();
var boxStyle = {
'width' : this.size.width,
'height' : this.size.height,
'perspective' : this.options.perspective + 'px'
},
config = $.extend( this.options, {
size : this.size,
items : this.$items,
direction : dir,
prev : this.prev,
current : this.current,
o : orientation
} ),
self = this;
this.$box = $('<div>').addClass( 'sb-perspective' ).css( boxStyle ).appendTo( this.$el );
this.cuboids = [];
this.$el.css( 'overflow', 'visible' );
for( var i = 0; i < this.options.cuboidsCount; ++i ) {
var cuboid = new $.Cuboid( config, i );
this.$box.append( cuboid.getEl() );
this.cuboids.push( cuboid );
}
},
_rotate : function() {
// hide current item
this.$items.eq( this.prev ).removeClass( 'sb-current' ).hide();
for( var i = 0; i < this.options.cuboidsCount; ++i ) {
var cuboid = this.cuboids[ i ],
self = this;
cuboid.rotate( function( pos ) {
if( pos === self.options.cuboidsCount - 1 ) {
self.$el.css( 'overflow', 'hidden' );
self.isAnimating = false;
self.$box.remove();
var $current = self.$items.eq( self.current );
$current.css( 'display', 'block' ); // show() makes it inline style
setTimeout(function() {
$current.addClass( 'sb-current' );
} , 0 );
self.options.onAfterChange( self.current );
}
});
}
},
_destroy : function( callback ) {
this.$el.off( '.slicebox' ).removeData( 'slicebox' );
$window.off( '.slicebox' );
callback.call();
},
// public methos: adds more items to the slicebox
add : function( $items, callback ) {
this.$items = this.$items.add( $items );
this.itemsCount = this.$items.length;
if ( callback ) {
callback.call( $items );
}
},
// public method: shows next image
next : function() {
this._stopSlideshow();
this._navigate( 'next' );
},
// public method: shows previous image
previous : function() {
this._stopSlideshow();
this._navigate( 'prev' );
},
// public method: goes to a specific image
jump : function( pos ) {
pos -= 1;
if( pos === this.current || pos >= this.itemsCount || pos < 0 ) {
return false;
}
this._stopSlideshow();
this._navigate( pos > this.current ? 'next' : 'prev', pos );
},
// public method: starts the slideshow
// any call to next(), previous() or jump() will stop the slideshow
play : function() {
if( !this.isPlaying ) {
this.isPlaying = true;
this._navigate( 'next' );
this.options.autoplay = true;
this._startSlideshow();
}
},
// publicc methos: pauses the slideshow
pause : function() {
if( this.isPlaying ) {
this._stopSlideshow();
}
},
// public method: check if isAnimating is true
isActive : function() {
return this.isAnimating;
},
// publicc methos: destroys the slicebox instance
destroy : function( callback ) {
this._destroy( callback );
}
};
$.Cuboid = function( config, pos ) {
this.config = config;
this.pos = pos;
this.side = 1;
this._setSize();
this._configureStyles();
};
$.Cuboid.prototype = {
_setSize : function() {
this.size = {
width : this.config.o === 'v' ? Math.floor( this.config.size.width / this.config.cuboidsCount ) : this.config.size.width,
height : this.config.o === 'v' ? this.config.size.height : Math.floor( this.config.size.height / this.config.cuboidsCount )
};
// extra space to fix gaps
this.extra = this.config.o === 'v' ? this.config.size.width - ( this.size.width * this.config.cuboidsCount ) : this.config.size.height - ( this.size.height * this.config.cuboidsCount );
},
_configureStyles : function() {
// style for the cuboid element
// set z-indexes based on the cuboid's position
var middlepos = Math.ceil( this.config.cuboidsCount / 2 ),
positionStyle = this.pos < middlepos ? {
zIndex : ( this.pos + 1 ) * 100,
left : ( this.config.o === 'v' ) ? this.size.width * this.pos : 0,
top : ( this.config.o === 'v' ) ? 0 : this.size.height * this.pos
} : {
zIndex : (this.config.cuboidsCount - this.pos) * 100,
left : ( this.config.o === 'v' ) ? this.size.width * this.pos : 0,
top : ( this.config.o === 'v' ) ? 0 : this.size.height * this.pos
};
// how much this cuboid is going to move (left or top values)
this.disperseFactor = this.config.disperseFactor * ( ( this.pos + 1 ) - middlepos );
this.style = $.extend( {
'-webkit-transition' : '-webkit-transform ' + this.config.speed + 'ms ' + this.config.easing,
'-moz-transition' : '-moz-transform ' + this.config.speed + 'ms ' + this.config.easing,
'-o-transition' : '-o-transform ' + this.config.speed + 'ms ' + this.config.easing,
'-ms-transition' : '-ms-transform ' + this.config.speed + 'ms ' + this.config.easing,
'transition' : 'transform ' + this.config.speed + 'ms ' + this.config.easing
}, positionStyle, this.size );
this.animationStyles = {
side1 : ( this.config.o === 'v' ) ? { 'transform' : 'translate3d( 0, 0, -' + ( this.size.height / 2 ) + 'px )' } : { 'transform' : 'translate3d( 0, 0, -' + ( this.size.width / 2 ) + 'px )' },
side2 : ( this.config.o === 'v' ) ? { 'transform' : 'translate3d( 0, 0, -' + ( this.size.height / 2 ) + 'px ) rotate3d( 1, 0, 0, -90deg )' } : { 'transform' : 'translate3d( 0, 0, -' + ( this.size.width / 2 ) + 'px ) rotate3d( 0, 1, 0, -90deg )' },
side3 : ( this.config.o === 'v' ) ? { 'transform' : 'translate3d( 0, 0, -' + ( this.size.height / 2 ) + 'px ) rotate3d( 1, 0, 0, -180deg )' } : { 'transform' : 'translate3d( 0, 0, -' + ( this.size.width / 2 ) + 'px ) rotate3d( 0, 1, 0, -180deg )' },
side4 : ( this.config.o === 'v' ) ? { 'transform' : 'translate3d( 0, 0, -' + ( this.size.height / 2 ) + 'px ) rotate3d( 1, 0, 0, -270deg )' } : { 'transform' : 'translate3d( 0, 0, -' + ( this.size.width / 2 ) + 'px ) rotate3d( 0, 1, 0, -270deg )' }
};
var measure = ( this.config.o === 'v' ) ? this.size.height : this.size.width;
this.sidesStyles = {
frontSideStyle : {
width : ( this.config.o === 'v' ) ? this.size.width + this.extra : this.size.width,
height : ( this.config.o === 'v' ) ? this.size.height : this.size.height + this.extra,
backgroundColor : this.config.colorHiddenSides,
transform : 'rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, ' + ( measure / 2 ) + 'px )'
},
backSideStyle : {
width : this.size.width,
height : this.size.height,
backgroundColor : this.config.colorHiddenSides,
transform : 'rotate3d( 0, 1, 0, 180deg ) translate3d( 0, 0, ' + ( measure / 2 ) + 'px ) rotateZ( 180deg )'
},
rightSideStyle : {
width : measure,
height : ( this.config.o === 'v' ) ? this.size.height : this.size.height + this.extra,
left : ( this.config.o === 'v' ) ? this.size.width / 2 - this.size.height / 2 : 0,
backgroundColor : this.config.colorHiddenSides,
transform : 'rotate3d( 0, 1, 0, 90deg ) translate3d( 0, 0, ' + ( this.size.width / 2 ) + 'px )'
},
leftSideStyle : {
width : measure,
height : ( this.config.o === 'v' ) ? this.size.height : this.size.height + this.extra,
left : ( this.config.o === 'v' ) ? this.size.width / 2 - this.size.height / 2 : 0,
backgroundColor : this.config.colorHiddenSides,
transform : 'rotate3d( 0, 1, 0, -90deg ) translate3d( 0, 0, ' + ( this.size.width / 2 ) + 'px )'
},
topSideStyle : {
width : ( this.config.o === 'v' ) ? this.size.width + this.extra : this.size.width,
height : measure,
top : ( this.config.o === 'v' ) ? 0 : this.size.height / 2 - this.size.width / 2,
backgroundColor : this.config.colorHiddenSides,
transform : 'rotate3d( 1, 0, 0, 90deg ) translate3d( 0, 0, ' + ( this.size.height / 2 ) + 'px )'
},
bottomSideStyle : {
width : ( this.config.o === 'v' ) ? this.size.width + this.extra : this.size.width,
height : measure,
top : ( this.config.o === 'v' ) ? 0 : this.size.height / 2 - this.size.width / 2,
backgroundColor : this.config.colorHiddenSides,
transform : 'rotate3d( 1, 0, 0, -90deg ) translate3d( 0, 0, ' + ( this.size.height / 2 ) + 'px )'
}
};
},
getEl : function() {
this.$el = $('<div/>').css( this.style )
.css( this.animationStyles.side1 )
.append( $('<div/>').addClass('sb-side').css( this.sidesStyles.frontSideStyle ) )
.append( $('<div/>').addClass('sb-side').css( this.sidesStyles.backSideStyle ) )
.append( $('<div/>').addClass('sb-side').css( this.sidesStyles.rightSideStyle ) )
.append( $('<div/>').addClass('sb-side').css( this.sidesStyles.leftSideStyle ) )
.append( $('<div/>').addClass('sb-side').css( this.sidesStyles.topSideStyle ) )
.append( $('<div/>').addClass('sb-side').css( this.sidesStyles.bottomSideStyle ) );
this._showImage( this.config.prev );
return this.$el;
},
_showImage : function( imgPos ) {
var sideIdx,
$item = this.config.items.eq( imgPos ),
imgParam = {
'background-size' : this.config.size.width + 'px ' + this.config.size.height + 'px'
};
imgParam.backgroundImage = 'url(' + $item.find( 'img' ).attr('src') + ')';
switch( this.side ) {
case 1 : sideIdx = 0; break;
case 2 : sideIdx = ( this.config.o === 'v' ) ? 4 : 2; break;
case 3 : sideIdx = 1; break;
case 4 : sideIdx = ( this.config.o === 'v' ) ? 5 : 3; break;
};
imgParam.backgroundPosition = ( this.config.o === 'v' ) ? - ( this.pos * this.size.width ) + 'px 0px' : '0px -' + ( this.pos * this.size.height ) + 'px';
this.$el.children().eq( sideIdx ).css( imgParam );
},
rotate : function( callback ) {
var self = this, animationStyle;
setTimeout(function() {
if( self.config.direction === 'next' ) {
switch( self.side ) {
case 1 : animationStyle = self.animationStyles.side2; self.side = 2; break;
case 2 : animationStyle = self.animationStyles.side3; self.side = 3; break;
case 3 : animationStyle = self.animationStyles.side4; self.side = 4; break;
case 4 : animationStyle = self.animationStyles.side1; self.side = 1; break;
};
}
else {
switch( self.side ) {
case 1 : animationStyle = self.animationStyles.side4; self.side = 4; break;
case 2 : animationStyle = self.animationStyles.side1; self.side = 1; break;
case 3 : animationStyle = self.animationStyles.side2; self.side = 2; break;
case 4 : animationStyle = self.animationStyles.side3; self.side = 3; break;
};
}
self._showImage( self.config.current );
var animateOut = {}, animateIn = {};
if( self.config.o === 'v' ) {
animateOut.left = '+=' + self.disperseFactor + 'px';
animateIn.left = '-=' + self.disperseFactor + 'px';
}
else if( self.config.o === 'h' ) {
animateOut.top = '+=' + self.disperseFactor + 'px';
animateIn.top = '-=' + self.disperseFactor + 'px';
}
self.$el.css( animationStyle ).animate( animateOut, self.config.speed / 2 ).animate( animateIn, self.config.speed / 2 , function() {
if( callback ) {
callback.call( self, self.pos );
}
});
}, this.config.sequentialFactor * this.pos + 30 );
}
};
var logError = function( message ) {
if ( window.console ) {
window.console.error( message );
}
};
$.fn.slicebox = function( options ) {
var self = $.data( this, 'slicebox' );
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
if ( !self ) {
logError( "cannot call methods on slicebox prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( self[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for slicebox self" );
return;
}
self[ options ].apply( self, args );
});
}
else {
this.each(function() {
if ( self ) {
self._init();
}
else {
self = $.data( this, 'slicebox', new $.Slicebox( options, this ) );
}
});
}
return self;
};
} )( jQuery, window );
我的JS档案：
jQuery(document).ready(function ($) {
$('#sb-slider').bind('mouseover', function () {
//pause slide
})
});