1

我正在尝试将 jQuery Cycle 插件与寻呼机一起使用（jQuery Cycle 插件是一个幻灯片插件。）

为什么在这个官方循环演示中寻呼机没有显示确切的图像数量：

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>';
    };
    
});
4

1 回答 1

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>

现在至于官方demo为什么会这样？我不知道 - 这是开发人员的问题。它确实说明了如何pagerAnchorBuilder根据它们的索引使用回调在每个寻呼机锚上设置不同的属性。

于 2012-12-07T03:03:12.813 回答