jQuery Cycle pagerAnchorBuilder

Question

我正在使用Cycle插件来制作新闻轮播。这意味着我使用Div填充幻灯片而不是图片。

我的最终目标是创建一个分页器，其中返回的不是通常的1、2、3、4等数字，而是幻灯片中第一个H3标签。

我知道这可能只是一个小的选择问题，但目前我正在使用以下内容：

$('#scroll_wrap').cycle({
        fx: 'fade',
        pager: '#pager',
        pagerAnchorBuilder: function(idx, slide) { 
                return '<li><a href="#">' + slide.children("h3").textContent + '</a></li>';
        }

我也尝试过像这样的东西：

    $('#scroll_wrap').cycle({
    fx: 'fade',
    pager: '#pager',
    pagerAnchorBuilder: function(idx, slide) { 
            var h3 = $('div',slide).children('h3');
            return '<li><a href="#">' + slide.h3 + '</a></li>';
    }

你可能已经注意到，我还是一个新手。 :/

有人可以帮我选择吗？

- Casey Wight

Answer 1

将pagerAnchorBuilder函数中的一行改为：

return '<li><a href="#">' + jQuery(slide).children("h3").eq(0).text() + '</a></li>';

需要改变三个事情：

slide => jQuery(slide)
因为jQuery不会自动将其帮助函数扩展到元素上，除非您告诉它。这是jQuery未扩展本地原型（如Element）的不幸副作用。这意味着您必须使用jQuery(x)来包装您代码中的每一个第三方元素。

children("h3") => children("h3").eq(0)
因为选择器返回匹配的对象数组，所以在执行选择器之后，你应该抓取第一个对象，否则链中后续的方法调用将作用于元素集合。Jquery 应该提供像.firstChild("h3").

textContent => .text()
textContent 是Mozilla的东西，在某些浏览器上不起作用。在此处使用jQuery的.text()方法。在这种情况下，jQuery没有做错任何事情。

- 3n.

---

没错，你是个厉害的人！而且还很帅气。再次感谢！ - Casey Wight

Answer 2

我已经尝试过这个方法，并且成功了：

$(function() {
$('#featured .container').before('<ul id="nav">').cycle({
    fx: 'scrollLeft',
    speed: 300,
    timeout: 5000, 
    next: '.next',
    prev: '.previous',
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
      var img = $(slide).children('.thumb').children().eq(0).attr("src");
      return '<li><a href="#"><img src="' + img + '" width="50" height="50" /></a></li>';
    }


});

Sougata

- Sougata Das

Answer 3

这是查找任何DOM元素的解决方案：

pagerAnchorBuilder: function(idx, slide) {
  return '<li><a href="#"> img src="' + jQuery(slide).find('img').attr('src') + '" width="70" height="50" / </a></li>';
}

- dannyfilth

---

这对我非常有帮助。由于图像源位于<li>标签内，我很难找到它。已点赞。 - AndyWarren

你忘了开始和结束标记< >，但是我很感激在你的帖子中找到了它。谢谢，这对我很有帮助。 - jhunlio

Answer 4

我发布这篇文章，因为这个问题排名很高。我认为我的解决方案更加强大。

我放弃了整个pageanchorbuilder的东西，它对于做任何花哨的事情来说都太过繁琐。我发现以下方法效果更好，并且可以让你更好地控制缩略图。

首先，按照以下方式构建您的Cycle舞台和缩略图托盘：

<div class="gallery">
    <div class="stage">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
    </div>
    <div class="thumb-tray">
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
    </div>
</div>

然后使用这个JS将缩略图链接到幻灯片。基本上，缩略图1链接到幻灯片1等等。

// Start Cycle
jQuery('.stage').cycle({ 
    timeout:  0,
});

// Make the thumbs change the stage on click
jQuery('.gallery .thumb').click(function(){
    var thumbIndex = jQuery(this).closest('.gallery').find('.thumb').index(jQuery(this));
    jQuery(this).closest('.gallery').find('.stage').cycle(thumbIndex);
});

这个方法也适用于页面上有多个Cycle图库的情况。请记住，幻灯片不一定要是图片。可以像这样构建舞台:

    <div class="stage">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>
    </div>

- Drew Baker

---

这个很好用，我该如何将活动缩略图项目添加一个活动CSS类？谢谢。 - Mark

Mark，您是指当单击缩略图时会出现一个活动类别？还是一个在自动循环设置下更新的活动类别？ - Drew Baker