Question

我有一个jQuery循环滑块工作正常，但我需要分页到不同的地方。分页本身有效，但每个div的活动幻灯片是相同的 - 即对于第一张幻灯片，每个div中的第一个分页器将显示为活动状态。我很难弄清楚如何解决这个问题！

我尝试实现的一个示例是此网站的分页http://www.cote-carmes.com/en-en/rooms.php。

标记的想法如下：

<div id="home-content">
<div class="home-sub first">
   <ul class="slide-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
   </ul>
</div>

<div class="home-sub">
   <ul class="slide-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
   </ul>
</div>

<div class="home-sub">
   <ul class="slide-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
   </ul>
</div>
</div>

我的jQuery如下：

$('#home-slider').cycle({
        pager:  '#home-content ul', 
        pagerAnchorBuilder: function(idx, slide) { 
            // return selector string for existing anchor 
            return '#home-content li:eq(' + idx + ') a'; 
        }

    });

请帮忙！

Answer 1

克里斯，

我想我破解了它。

根据jquery.malsup.com/cycle/pager3.html查看 this demo 。

这就是我所做的：

将寻呼机ul拆分为两个独立的用户
修改了.cycle()调用中的pagerAnchorBuilder选项，如下所示，使每个ul中的第一个链接成为活动寻呼机。
添加了一些css以给两个不同颜色的锚点边框（只是为了表示不同的uls），并为活动的寻呼机链接提供鼠标悬停效果。

使用Javascript：

$('#slideshow').cycle({
    fx:     'turnDown',
    speed:  'fast',
    timeout: 0,
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
        var selector = '#nav li:eq(' + (idx) + ')';//li selector
        var $li = $(selector).filter(function() {
            return $(this).index() == 0;//accept only the first li in its ul
        });
        if( $li.length > 0 ) {
            $li.find('a').addClass('pager');
            return selector + ' a';//anchor selector
        }
    }
});

这可能不是你想要的，但它应该会给你一个前进的方法。

修改

从fiddle开始，我最终得到了这个：

$('#home-slider').cycle({
    pager: '#home-content',
    pagerAnchorBuilder: function(idx, slide) {
        return '#home-content li:eq(' + idx + ') a';
    },
    updateActivePagerLink: function(containerID, idx, cl) {
        $lis = $('#home-content li').removeClass(cl).eq(idx).addClass(cl);
    }
});

注意：

在HTML中，<div class="home-sub">包装已删除 - 不必要。
周期pager选项已从pager: '#home-content ul'更改为pager: '#home-content'
添加了周期updateActivePagerLink选项 - 提供自定义突出显示效果

<强> DEMO

将jQuery循环分页器拆分为div

1 个答案:

修改