javascript - jQuery 循环插件 : Why the pager doesn't show the exact number of images in this official demo?

Question

我正在尝试将 jQuery Cycle 插件与寻呼机一起使用(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

它不会显示第三个以外的任何 anchor ，因为 pagerFactory() 回调显式在这些 anchor 上设置 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 回调根据索引在每个寻呼机 anchor 上设置不同的属性。