-1
我有以下的jQuery的文件... 我怎麼能直接訪問直接$ navPrev和$ navNext功能在我的內聯腳本或者我想任何事件。例如：如何訪問jquery函數？
$("a").swipe({
//Generic swipe handler for all directions
swipe:function(event, direction, distance, duration, fingerCount) {
// My code here to move next or previous based on swipe action.
);
},
});
我基本上是添加jquery滑動功能來滾動滑塊。爲此我需要能夠直接訪問下一個和前一個功能。
(function($, undefined) {
// Gallery object.
$.Gallery = function(options, element) {
this.$el = $(element);
this._init(options);
};
$.Gallery.defaults = {
current : 0, // index of current item
autoplay : false,// slideshow on/off
interval : 2000 // time between transitions
};
$.Gallery.prototype = {
_init : function(options) {
this.options = $.extend(true, {}, $.Gallery.defaults, options);
// support for 3d/2d transforms and transitions
this.support3d = Modernizr.csstransforms3d;
this.support2d = Modernizr.csstransforms;
this.supportTrans = Modernizr.csstransitions;
this.$wrapper = this.$el.find('.dg-wrapper');
this.$items = this.$wrapper.children();
this.itemsCount = this.$items.length;
this.$nav = this.$el.find('nav');
this.$navPrev = this.$nav.find('.dg-prev');
this.$navNext = this.$nav.find('.dg-next');
// minimum of 3 items
if(this.itemsCount < 3) {
this.$nav.remove();
return false;
}
this.current = this.options.current;
this.isAnim = false;
this.$items.css({
'opacity' : 0,
'visibility': 'hidden'
});
this._validate();
this._layout();
// load the events
this._loadEvents();
// slideshow
if(this.options.autoplay) {
this._startSlideshow();
}
},
_validate : function() {
if(this.options.current < 0 || this.options.current > this.itemsCount - 1) {
this.current = 0;
}
},
_layout : function() {
// current, left and right items
this._setItems();
// current item is not changed
// left and right one are rotated and translated
var leftCSS, rightCSS, currentCSS;
if(this.support3d && this.supportTrans) {
leftCSS = {
'-webkit-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
'-moz-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
'-o-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
'-ms-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
'transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)'
};
rightCSS = {
'-webkit-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
'-moz-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
'-o-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
'-ms-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
'transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)'
};
leftCSS.opacity = 1;
leftCSS.visibility = 'visible';
rightCSS.opacity = 1;
rightCSS.visibility = 'visible';
}
else if(this.support2d && this.supportTrans) {
leftCSS = {
'-webkit-transform' : 'translate(-350px) scale(0.8)',
'-moz-transform' : 'translate(-350px) scale(0.8)',
'-o-transform' : 'translate(-350px) scale(0.8)',
'-ms-transform' : 'translate(-350px) scale(0.8)',
'transform' : 'translate(-350px) scale(0.8)'
};
rightCSS = {
'-webkit-transform' : 'translate(350px) scale(0.8)',
'-moz-transform' : 'translate(350px) scale(0.8)',
'-o-transform' : 'translate(350px) scale(0.8)',
'-ms-transform' : 'translate(350px) scale(0.8)',
'transform' : 'translate(350px) scale(0.8)'
};
currentCSS = {
'z-index' : 999
};
leftCSS.opacity = 1;
leftCSS.visibility = 'visible';
rightCSS.opacity = 1;
rightCSS.visibility = 'visible';
}
this.$leftItm.css(leftCSS || {});
this.$rightItm.css(rightCSS || {});
this.$currentItm.css(currentCSS || {}).css({
'opacity' : 1,
'visibility': 'visible'
}).addClass('dg-center');
},
_setItems : function() {
this.$items.removeClass('dg-center');
this.$currentItm = this.$items.eq(this.current);
this.$leftItm = (this.current === 0) ? this.$items.eq(this.itemsCount - 1) : this.$items.eq(this.current - 1);
this.$rightItm = (this.current === this.itemsCount - 1) ? this.$items.eq(0) : this.$items.eq(this.current + 1);
if(!this.support3d && this.support2d && this.supportTrans) {
this.$items.css('z-index', 1);
this.$currentItm.css('z-index', 999);
}
// next & previous items
if(this.itemsCount > 3) {
// next item
this.$nextItm = (this.$rightItm.index() === this.itemsCount - 1) ? this.$items.eq(0) : this.$rightItm.next();
this.$nextItm.css(this._getCoordinates('outright'));
// previous item
this.$prevItm = (this.$leftItm.index() === 0) ? this.$items.eq(this.itemsCount - 1) : this.$leftItm.prev();
this.$prevItm.css(this._getCoordinates('outleft'));
}
},
_loadEvents : function() {
var _self = this;
this.$navPrev.on('click.gallery', function(event) {
if(_self.options.autoplay) {
clearTimeout(_self.slideshow);
_self.options.autoplay = false;
}
_self._navigate('prev');
return false;
});
this.$navNext.on('click.gallery', function(event) {
if(_self.options.autoplay) {
clearTimeout(_self.slideshow);
_self.options.autoplay = false;
}
_self._navigate('next');
return false;
});
this.$wrapper.on('webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery', function(event) {
_self.$currentItm.addClass('dg-center');
_self.$items.removeClass('dg-transition');
_self.isAnim = false;
});
},
_getCoordinates : function(position) {
if(this.support3d && this.supportTrans) {
switch(position) {
case 'outleft':
return {
'-webkit-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
'-moz-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
'-o-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
'-ms-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
'transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)',
'opacity' : 0,
'visibility' : 'hidden'
};
break;
case 'outright':
return {
'-webkit-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
'-moz-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
'-o-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
'-ms-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
'transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)',
'opacity' : 0,
'visibility' : 'hidden'
};
break;
case 'left':
return {
'-webkit-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
'-moz-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
'-o-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
'-ms-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
'transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)',
'opacity' : 1,
'visibility' : 'visible'
};
break;
case 'right':
return {
'-webkit-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
'-moz-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
'-o-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
'-ms-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
'transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)',
'opacity' : 1,
'visibility' : 'visible'
};
break;
case 'center':
return {
'-webkit-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',
'-moz-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',
'-o-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',
'-ms-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',
'transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)',
'opacity' : 1,
'visibility' : 'visible'
};
break;
};
}
else if(this.support2d && this.supportTrans) {
switch(position) {
case 'outleft':
return {
'-webkit-transform' : 'translate(-450px) scale(0.7)',
'-moz-transform' : 'translate(-450px) scale(0.7)',
'-o-transform' : 'translate(-450px) scale(0.7)',
'-ms-transform' : 'translate(-450px) scale(0.7)',
'transform' : 'translate(-450px) scale(0.7)',
'opacity' : 0,
'visibility' : 'hidden'
};
break;
case 'outright':
return {
'-webkit-transform' : 'translate(450px) scale(0.7)',
'-moz-transform' : 'translate(450px) scale(0.7)',
'-o-transform' : 'translate(450px) scale(0.7)',
'-ms-transform' : 'translate(450px) scale(0.7)',
'transform' : 'translate(450px) scale(0.7)',
'opacity' : 0,
'visibility' : 'hidden'
};
break;
case 'left':
return {
'-webkit-transform' : 'translate(-350px) scale(0.8)',
'-moz-transform' : 'translate(-350px) scale(0.8)',
'-o-transform' : 'translate(-350px) scale(0.8)',
'-ms-transform' : 'translate(-350px) scale(0.8)',
'transform' : 'translate(-350px) scale(0.8)',
'opacity' : 1,
'visibility' : 'visible'
};
break;
case 'right':
return {
'-webkit-transform' : 'translate(350px) scale(0.8)',
'-moz-transform' : 'translate(350px) scale(0.8)',
'-o-transform' : 'translate(350px) scale(0.8)',
'-ms-transform' : 'translate(350px) scale(0.8)',
'transform' : 'translate(350px) scale(0.8)',
'opacity' : 1,
'visibility' : 'visible'
};
break;
case 'center':
return {
'-webkit-transform' : 'translate(0px) scale(1)',
'-moz-transform' : 'translate(0px) scale(1)',
'-o-transform' : 'translate(0px) scale(1)',
'-ms-transform' : 'translate(0px) scale(1)',
'transform' : 'translate(0px) scale(1)',
'opacity' : 1,
'visibility' : 'visible'
};
break;
};
}
else {
switch(position) {
case 'outleft' :
case 'outright' :
case 'left' :
case 'right' :
return {
'opacity' : 0,
'visibility' : 'hidden'
};
break;
case 'center' :
return {
'opacity' : 1,
'visibility' : 'visible'
};
break;
};
}
},
_navigate : function(dir) {
if(this.supportTrans && this.isAnim)
return false;
this.isAnim = true;
switch(dir) {
case 'next' :
this.current = this.$rightItm.index();
// current item moves left
this.$currentItm.addClass('dg-transition').css(this._getCoordinates('left'));
// right item moves to the center
this.$rightItm.addClass('dg-transition').css(this._getCoordinates('center'));
// next item moves to the right
if(this.$nextItm) {
// left item moves out
this.$leftItm.addClass('dg-transition').css(this._getCoordinates('outleft'));
this.$nextItm.addClass('dg-transition').css(this._getCoordinates('right'));
}
else {
// left item moves right
this.$leftItm.addClass('dg-transition').css(this._getCoordinates('right'));
}
break;
case 'prev' :
this.current = this.$leftItm.index();
// current item moves right
this.$currentItm.addClass('dg-transition').css(this._getCoordinates('right'));
// left item moves to the center
this.$leftItm.addClass('dg-transition').css(this._getCoordinates('center'));
// prev item moves to the left
if(this.$prevItm) {
// right item moves out
this.$rightItm.addClass('dg-transition').css(this._getCoordinates('outright'));
this.$prevItm.addClass('dg-transition').css(this._getCoordinates('left'));
}
else {
// right item moves left
this.$rightItm.addClass('dg-transition').css(this._getCoordinates('left'));
}
break;
};
this._setItems();
if(!this.supportTrans)
this.$currentItm.addClass('dg-center');
},
_startSlideshow : function() {
var _self = this;
this.slideshow = setTimeout(function() {
_self._navigate('next');
if(_self.options.autoplay) {
_self._startSlideshow();
}
}, this.options.interval);
},
destroy : function() {
this.$navPrev.off('.gallery');
this.$navNext.off('.gallery');
this.$wrapper.off('.gallery');
}
};
var logError = function(message) {
if (this.console) {
console.error(message);
}
};
$.fn.gallery = function(options) {
if (typeof options === 'string') {
var args = Array.prototype.slice.call(arguments, 1);
this.each(function() {
var instance = $.data(this, 'gallery');
if (!instance) {
logError("cannot call methods on gallery prior to initialization; " +
"attempted to call method '" + options + "'");
return;
}
if (!$.isFunction(instance[options]) || options.charAt(0) === "_") {
logError("no such method '" + options + "' for gallery instance");
return;
}
instance[ options ].apply(instance, args);
});
}
else {
this.each(function() {
var instance = $.data(this, 'gallery');
if (!instance) {
$.data(this, 'gallery', new $.Gallery(options, this));
}
});
}
return this;
};
})(jQuery);
這是我的HTML代碼：
<div class="container">
<!-- Codrops top bar -->
<!--/ Codrops top bar -->
<section id="dg-container" class="dg-container">
<div class="dg-wrapper">
<a href="#"><img src="album1.jpg" alt="image05"></a>
<a href="#"><img src="album2.jpg" alt="image06"></a>
<a href="#"><img src="album3.jpg" alt="image07"></a>
</div>
<nav>
<span class="dg-prev"><</span>
<span class="dg-next">></span>
</nav>
</section>
</div>
編輯： 下面是如何滑塊正在從HTML頁面
<script type="text/javascript">
$(function() {
$me=$('#dg-container').gallery({
autoplay : true
});
// console.log($me);
});
</script>
有你設法您的問題在所有的縮小？ – Undefined
你可以展示你的代碼，你如何從document.ready調用你的畫廊？ – mabus44
添加了關於如何從html頁面調用滑塊的編輯。 – swtweb