我想在jquery循环回调之前使用两个函数。当用户循环时,一个滑动翻页器,而另一个其他图像在包含div的内部水平和垂直居中。两者都很好地分开工作,但我似乎可以让他们在回调之前一起工作。我有一个例子,显示我已经得到的滑动功能是在回调后设置的。 - http://tinyurl.com/27pmzj5
这是我到目前为止的代码。
$(function() {
$('#photo-slideshow').cycle({
timeout: 0,
next: '#next-btn',
prev: '#prev-btn',
before: align,
after: slide,
pager: '#nav',
// callback fn that creates a thumbnail to use as pager anchor
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="' + slide.src + '" width="75" height="75" /></a></li>';
}
});
//Play and Pause
$('#pause-btn').click(function() { $('#photo-slideshow').cycle('pause'); return false; });
$('#play-btn').click(function() { $('#photo-slideshow').cycle('resume'); return false; });
//Align Image
function align(curr,next,opts) {
//center the image
var $slide = $(next);
var w = $slide.outerWidth();
var h = $slide.outerHeight();
$slide.css({
marginTop: (800 - h) / 2,
marginLeft: (800 - w) / 2
});
//centers the DIV vertically!!!!
var divHeight = 800;
var theImageHeight = $slide.outerHeight();
var newTopMargin = (divHeight - theImageHeight) / 2;
if(theImageHeight > 800){
$('#photo-slideshow').css({
marginTop: newTopMargin
});
}
//Adds caption and credit line
$('#photo-info').html(this.title)
.append('<p>' + "Credit: " + this.alt + '</p>');
}
//Slide Pager
function slide(a,b,c,d) {
if ( c.currSlide < c.slideCount-3 || c.nextSlide == 0 ){
var p = ( c.nextSlide - 2 < 0 ) ? 0 : -(75*(c.nextSlide-2));
$("#nav").animate({"left":p+"px"},500);
}
}
});
任何有关让这两个都能在之前回调上工作的帮助将不胜感激!
答案 0 :(得分:1)
也许我误解了这个问题,但你不能这样做:
before: function(a, b, c, d) {
align(a, b, c);
slide(a, b, c, d);
}
??换句话说,只需将“before”处理程序设置为调用其他两个函数的函数。如果您愿意,可以将其编写为单独的函数:
function callBoth(a, b, c, d) {
align(a, b, c, d);
slide(a, b, c, d);
}
为了让它变得不那么难看,你可以这样做:
function callBoth() {
align.apply(this, arguments);
slide.apply(this, arguments);
}