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

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

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

需要改变三件事：

slide =＆gt; jQuery的（滑动）
因为除非你告诉它，否则jQuery不会使用其辅助函数扩展元素。这是jQuery不能扩展本机原型（如Element）的不幸副作用。这意味着你必须使用jQuery（x）包装代码中的每一件事。

儿童（“h3”）=＆gt;儿童（ “H3”）。当量（0）
因为选择器返回匹配的对象数组，所以在执行选择器之后应该抓取第一个，否则链中的以下方法调用将作用于元素集。 Jquery应该提供像.firstChild（“h3”）这样的东西。

textContent =＆gt;的.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的事情，这是做任何花哨的事情的麻烦。这是我发现更好的工作，让你更好地控制拇指。

首先按照以下步骤构建您的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>

jQuery Cycle pagerAnchorBuilder

4 个答案: