3

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

pagerAnchorBuilderpager是在（.thumbs在我的示例中）中创建缩略图的函数。这个想法是缩略图是在其中创建的，.thumbs并且.slides是幻灯片的包装（在我的例子中是图像）。

但是，我在控制台中得到了这个日志（不是错误或警告，只是日志）：

[循环] 1 - img 幻灯片未加载，正在排队幻灯片：gallery01.jpg 0 0

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

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

4

1 回答 1

2

唔 ...

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

如果传入“pagerAnchorBuilder”回调的“slide”将是<img>“slides”中的元素之一<div>，那么您不需要“find()”。它应该只是：

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

或者，更简单：

    var img = slide.src;

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

于 2011-02-28T16:49:39.393 回答