jQuery Cycle - img 幻灯片未加载，重新排队幻灯片放映

Question

我正在使用 jQuery Cycle 插件创建一个非常简单的幻灯片：

标记：

<div class="gallery group">

    <div class="slide-nav">
        <a href="#" class="previous">&laquo; Ver anterior</a>
        <a href="#" class="view">Ver Ficha</a>
        <a href="#" class="next">Ver siguiente &raquo;</a>
    </div><!-- /slide-nav -->

    <div class="slider">

        <div class="slides">
            <img src="img/gallery01.jpg" alt="" />
            <img src="img/gallery02.jpg" alt="" />
            <img src="img/gallery01.jpg" alt="" />
            <img src="img/gallery02.jpg" alt="" />
        </div>

        <div class="thumbs"></div>

    </div><!-- /slider -->

</div><!-- /gallery -->

脚本：

jQuery('.gallery .slider .slides').cycle({ 
    fx:     'fade', 
    speed:  '800', 
    timeout: 3000, 
    prev:   '.gallery .slide-nav a.previous',
    next:   '.gallery .slide-nav a.next',
    pager:  '.gallery .slider .thumbs',

    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) {
        var img = jQuery(slide).find("img").attr("src");
        return '<a href="#"><img src="' + img + '" /></a>';
    } 
});

pagerAnchorBuilder 是在 pager 中创建缩略图的函数 (.thumbs 在我的例子中）。这个想法是，缩略图是在 .thumbs 中创建的，而 .slides 是幻灯片的包装器（在我的例子中是图像）。

但是，我在控制台中登录（不是错误或警告，只是日志）：

[cycle] 1 - img 幻灯片未加载， 重新排队幻灯片： gallery01.jpg 0 0

幻灯片放映仍然有效，但它不会创建缩略图，告诉我 pagerAnchorBuilder 函数中的 img 变量未定义。

知道“重新排队幻灯片放映”是什么意思以及为什么图像未定义吗？我过去多次使用过这个确切的片段，但以前从未遇到过这个问题。

Answer 1

嗯...

    var img = jQuery(slide).find("img").attr("src");

如果传入“pagerAnchorBuilder”回调的“幻灯片”将是“幻灯片”中的 元素之一

，那么你不需要“find()”。它应该只是：

    var img = jQuery(slide).attr('src');

或者更简单：

    var img = slide.src;

“.find()”方法永远不会包含起始元素；它只查看 DOM 中的后代。