jQuery的周期pagerAnchorBuilder

Question

我使用用于在新闻旋转器使用循环插件。这意味着我使用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>';
    }

正如你可能会说，我还是一个初出茅庐的。 ：/

谁能帮我完成seleciton？

Answer 1

在pagerAnchorBuilder函数更改一行这样：

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

需要改变三两件事：

<强>滑动=> jQuery的（滑动）结果 因为jQuery不其辅助功能扩展元素，除非你告诉它。这是不jQuery的延伸当地人的原型（像元）的不幸的副作用。这意味着你必须包装在使用jQuery（x）的代码中的每个第三件事。

<强>子（ “H3”）=>子（ “H3”）。当量（0）结果 因为选择返回对象的数组匹配，你应该怎么做选择，否则在链下面的方法调用将作用于元素集合后抢到的第一个。 jQuery的应该提供的东西像.firstChild（ “H3”）。

<强>的textContent =>的.text（）结果 的textContent是一个Mozilla的事情，在某些浏览器无法正常工作。这里使用jQuery的的.text（）方法。在这种情况下，jQuery的没有做错任何事情。

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

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>';
}

Answer 4

我张贴这一点，因为这个问题来了作为一个高排名。我想，我的解决办法是更强大。

我感动从整体pageanchorbuilder的事情了，它的方式做任何幻想繁琐。这是我发现的工作更好，让您的拇指更多的控制。

首先构建您的周期阶段和拇指托盘是这样的：

<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);
});

这将与多个周期画廊的工作在页面上了。请记住幻灯片不必是图像。这些阶段可以建立这样的：

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