8

我正在使用 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>';
    }

正如你可能知道的那样，我还是个初出茅庐的人。：/

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

4

4 回答 4

14

将 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 没有做错任何事情。

于 2009-09-02T23:07:23.930 回答
4

我已经尝试过，并且工作过：

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


});

相形

于 2011-02-21T14:57:33.750 回答
4

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

pagerAnchorBuilder: function(idx, slide) {
  return '<li><a href="#"> img src="' + jQuery(slide).find('img').attr('src') + '" width="70" height="50" / </a></li>';
}
于 2011-03-16T22:40:19.330 回答
3

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

我离开了整个 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>
于 2012-05-01T19:46:08.560 回答