Update jQuery Cycle Pager onLoad

Question

我正在尝试构建一个寻呼机div，该div 显示每个图库都有大量幻灯片 （30+） 的项目的编号幻灯片链接的子集。例如，我最初只想显示幻灯片 1-8 的链接，并带有一个用于"下一步"的按钮。

这是一个说明我问题的jsFiddle：http://jsfiddle.net/elihubogan/k2ZK3/

除了初始图库加载之外，一切正常，我不知道如何将正确的变量/选项传递到"onAfterPager"函数中以在初始加载时运行该函数。

有什么想法吗？

.HTML：

<div id="banner">
    <img src="http://placehold.it/350x150" alt="Image A" title="This is Image 1" />
    <img src="http://placehold.it/350x150" alt="Image B" title="This is Image 2" />
    <img src="http://placehold.it/350x150" alt="Image C" title="This is Image 3" />
    <img src="http://placehold.it/350x150" alt="Image D" title="This is Image 4" />
    <img src="http://placehold.it/350x150" alt="Image E" title="This is Image 5" />
</div>
<div id="caption"></div>
<button id="previous">Previous</button>
<button id="next">Next</button><br />
Only want to show 3 links at a time...<br />
Notice that clicking 'Next' above triggers the proper formatting
<div id="pager"></div>

.JS：

$(document).ready(function () {
    function onAfterPager(curr, next, opts) {
        // update caption
        $('#caption').html(this.title);
        // check index, remove 'prev' link if on first slide, 
        // remove 'next' link if on last slide
        var index = opts.currSlide;
        $('#prev')[index === 0 ? 'hide' : 'show']();
        $('#next')[index === opts.slideCount - 1 ? 'hide' : 'show']();
        // reset pager numbers if necessary
        $('#pager a').hide();
        // set links per page (3 in this example)
        var $lpp = 3;
        var $cur = index + 1;
        var $tot = opts.slideCount;
        var $batch = $lpp - Math.round($lpp / 2);
        // if current page plus $batch is less than the total slidecount
        // then we're not near the end
        if ($cur + $batch <= $tot) {
            $rs = $batch;
            // conversely, we can test if we're near the beginning
            if ($cur - $batch >= (2 - $batch)) {
                for (i = 1; i <= $batch; i++) {
                    if ($cur - i > 0) $('#pager a').eq(($cur - i) - 1).show();
                    else $rs += 1;
                }
                // if we're near the beginning
            } else {
                $('#pager a').eq($cur - 1).show();
                $rs += $batch;
            }
            $('#pager a').eq($cur - 1).show();
            for (i = 1; i <= $rs; i++)
            $('#pager a').eq(($cur + i) - 1).show();
            // if we're near the end
        } else {
            $rs = $batch;
            if ($cur + $batch <= ($tot + ($batch - 1))) {
                for (i = 1; i <= $batch; i++) {
                    if ($cur + i <= $tot) $('#pager a').eq(($cur + i) - 1).show();
                    else $rs += 1;
                }
            } else {
                $('#pager a').eq($cur - 1).show();
                $rs += $batch;
            }
            $('#pager a').eq($cur - 1).show();
            for (i = 1; i <= $rs; i++)
            $('#pager a').eq(($cur - i) - 1).show();
        }
    }
    $('#banner').cycle({
        fx: 'fade',
        speed: 500,
        timeout: 5000,
        next: '#next',
        prev: '#previous',
        pause: 1,
        after: onAfterPager,
        //after: onAfter,
        pager: '#pager'
    });
});

Answer 1

这里的问题是，首次调用 onPagerAfter 函数时，尚未创建寻呼机。 您可以通过在函数中执行console.log($('#pager a'))来查看这一点。 对于索引零，jQuery 找不到分页器元素（返回的对象长度为零，即：未找到匹配项）。 这可以被认为是循环库的错误。

作为一种解决方法，您可以使用 pagerAnchorBuilder 选项提供一个函数，该函数在构造每个定位点时为每个定位点运行，并且可以根据需要单独显示/隐藏它们。 请参阅我对jsFiddle的更新：http://jsfiddle.net/k2ZK3/2/

希望这有帮助！