我有两个函数我想在我的前回调中使用 jquery 循环。一个在用户循环浏览时滑动寻呼机,另一个将图像水平和垂直居中在包含的 div 内。两者单独工作都很好,但我似乎可以让它们在 before 回调中一起工作。我有一个示例,显示了我所拥有的内容,但在 after 回调中设置了幻灯片功能。- 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);
}
}
});
非常感谢任何帮助让这两个都在 before 回调上工作!