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 回答