jQuery 循环寻呼机AnchorBuilder

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

如你所知，我还是个初出茅庐的人。 :/

任何人都可以帮助我进行选择吗？

Answer 1

我发布这个，因为这个问题是一个高等级的问题。我认为我的解决方案更加强大。

我放弃了整个 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>

Answer 2

这是搜索任何 DOM 元素的解决方案：

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

Answer 3

我已经尝试过，并且成功了：

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


});

苏形

Answer 4

将 pagerAnchorBuilder 函数中的一行更改为：

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

需要改变三件事：

幻灯片 => jQuery(幻灯片)
因为除非你告诉它，否则 jQuery 不会使用它的辅助函数来扩展元素。这是 jQuery 没有扩展原生原型（如 Element）的一个不幸的副作用。这意味着您必须使用 jQuery(x) 将代码中的第三个东西包装起来。

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

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