帮助需要合并 jquery 循环的两个函数吗?

发布于 2024-09-10 15:46:35 字数 1922 浏览 9 评论 0原文

我有两个函数想在 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

偷得浮生 2024-09-17 15:46:35

也许我误解了这个问题,但你不能这样做:

before: function(a, b, c, d) {
  align(a, b, c);
  slide(a, b, c, d);
}

??换句话说,只需将“之前”处理程序设置为调用其他两个函数的函数即可。如果您愿意,您可以将其编写为单独的函数:

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);
}

Maybe I'm misunderstanding the question, but can't you just do:

before: function(a, b, c, d) {
  align(a, b, c);
  slide(a, b, c, d);
}

?? 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:

function callBoth(a, b, c, d) {
  align(a, b, c, d);
  slide(a, b, c, d);
}

To make it a little less ugly you could do this:

function callBoth() {
  align.apply(this, arguments);
  slide.apply(this, arguments);
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文