我正在使用 jQuery Cycle 插件创建一个非常简单的幻灯片:
标记:
<div class="gallery group">
<div class="slide-nav">
<a href="#" class="previous">« Ver anterior</a>
<a href="#" class="view">Ver Ficha</a>
<a href="#" class="next">Ver siguiente »</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
是幻灯片的包装(在我的例子中是图像)。
但是,我在控制台中得到了这个日志(不是错误或警告,只是日志):
[循环] 1 - img 幻灯片未加载,正在排队幻灯片:gallery01.jpg 0 0
幻灯片仍然有效,但它不会创建缩略图,告诉我函数中的img
变量pagerAnchorBuilder
是未定义的。
知道“重新排队幻灯片”是什么意思以及为什么图像未定义吗?我过去多次使用过这个确切的片段,以前从未遇到过这个问题。