Question

我正在尝试构建一个寻呼机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/

希望这有帮助！

更新jQuery Cycle Pager onLoad

1 个答案: