帮助需要合并 jquery 循环的两个函数吗?
我有两个函数想在 jquery 循环的 before 回调中使用。一种是在用户循环浏览时将寻呼机滑过,另一种是将图像在包含的 div 内水平和垂直居中。两者单独工作都很好,但我似乎可以让它们在 before 回调中一起工作。我有一个示例,显示了我所得到的内容,但幻灯片函数是在回调后设置的。 - 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);
}
}
});
任何帮助让这两个在回调之前工作的帮助将不胜感激!
I have two functions I would like to use in my before callback with jquery cycle. One slides the pager over as the user cycles through, and other other centers the image horizontally and vertically inside the containing div. Both work great separately, yet I can seem to get them to work together both on the before callback. I have an example that shows what I've got yet the slide function is set on the after callback. - http://tinyurl.com/27pmzj5
Here is the code I have so far.
$(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);
}
}
});
Any help on getting this two to both work on the before callback would be greatly appreciated!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
也许我误解了这个问题,但你不能这样做:
??换句话说,只需将“之前”处理程序设置为调用其他两个函数的函数即可。如果您愿意,您可以将其编写为单独的函数:
为了使其不那么难看,您可以这样做:
Maybe I'm misunderstanding the question, but can't you just do:
?? In other words, just set the "before" handler to a function that calls your other two functions. You could write it as a separate function if you like:
To make it a little less ugly you could do this: