0

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

    });

请帮忙！

4

1 回答 1

1

克里斯，

我想我破解了它。

查看这个基于 jquery.malsup.com/cycle/pager3.html 的演示。

这就是我所做的：

  • 将寻呼机 ul 拆分为两个单独的 ul
  • 修改了.cycle()调用中的 pagerAnchorBuilder 选项，如下所示，仅使每个 ul 中的第一个链接成为活动寻呼机。
  • 添加了一些 css 来为两个 uls 中的锚边框赋予不同的颜色（只是为了指示不同的 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
        }
    }
});

这可能不是你想要的，但它应该给你一条前进的道路。

编辑

从你的小提琴开始，我最终得到了这个：

$('#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选项 - 以提供自定义突出显示效果

演示

于 2012-09-25T05:37:19.623 回答