将jQuery循环分页器拆分为div

时间:2012-09-25 02:19:39

标签: jquery cycle

我有一个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'; 
        }

    });

请帮忙!

1 个答案:

答案 0 :(得分: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