0

我正在尝试构建一个寻呼机 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'
    });
});
4

1 回答 1

0

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

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

希望这可以帮助！

于 2013-10-12T08:45:31.700 回答