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 slide未加载，重新排列幻灯片：gallery01.jpg 0 0

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

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

Answer 1

嗯...

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

如果传入“pagerAnchorBuilder”回调的“幻灯片”将成为“幻灯片”<img>中的<div>个元素之一，那么您不需要“find（）” 。它应该只是：

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

或更简单：

    var img = slide.src;

“。find（）”方法不会包含起始元素;它只关注DOM中的后代。

jQuery Cycle - 未加载img幻灯片，重新排列幻灯片

1 个答案: