jQuery Cycle Plugin：为什么在此官方演示中，传呼机未显示确切的图像数量？

Question

我正在尝试将jQuery Cycle Plugin与传呼器配合使用（ jQuery Cycle Plugin是幻灯片演示插件。）

为什么寻呼机在此官方循环演示中未显示确切的图像数量：

http://jquery.malsup.com/cycle/pager11.html

如果您看一下代码，则有8张图片：

<div id="slideshow" class="pics" style="margin:auto;clear:left;margin-top:40px">
    <img src="malsup/cycle/beach1.jpg" />
    <img src="malsup/cycle/beach2.jpg" />
    <img src="malsup/cycle/beach3.jpg" />
    <img src="malsup/cycle/beach4.jpg" />
    <img src="malsup/cycle/beach5.jpg" />
    <img src="malsup/cycle/beach6.jpg" />
    <img src="malsup/cycle/beach7.jpg" />
    <img src="malsup/cycle/beach8.jpg" />
</div>

寻呼机仅显示3个按钮。 它应该显示8个按钮？

编辑：JavaScript代码：

$(function() {

    $('#slideshow').cycle({
        fx:      'scrollHorz',
        timeout:  0,
        prev:    '#prev',
        next:    '#next',
        pager:   '#nav',
        pagerAnchorBuilder: pagerFactory
    });

    function pagerFactory(idx, slide) {
        var s = idx > 2 ? ' style="display:none"' : '';
        return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>';
    };

});

Answer 1

它不会显示第三个锚以外的锚，因为pagerFactory()回调显式设置了style='display:none;' 在那些锚点上。

function pagerFactory(idx, slide) {
    // This line tests if the anchor's index is > 2
    // (beyond the 3rd anchor) and sets its display property to none
    var s = idx > 2 ? ' style="display:none"' : '';
    return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>';
};

可以通过浏览器的检查器看到对DOM的影响：

<ul id="nav">
  <li class="activeSlide"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li style="display:none"><a href="#">4</a></li>
  <li style="display:none"><a href="#">5</a></li>
  <li style="display:none"><a href="#">6</a></li>
  <li style="display:none"><a href="#">7</a></li>
  <li style="display:none"><a href="#">8</a></li>
</ul>

现在， 为什么要进行官方演示？ 我不知道-这是开发人员的问题。 它确实说明了如何使用pagerAnchorBuilder回调基于其索引在每个寻呼锚上设置不同的属性。