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回调如何根据其索引在每个寻呼机锚上设置不同的属性。

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

编辑：JavaScript代码：

1 个答案: