我正在使用 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
是幻灯片的包装器(在我的例子中是图像)。
但是,我在控制台的日志中得到了这个(不是错误或警告,只是日志):
[cycle] 1 - img slide not loaded, requeuing slideshow: gallery01.jpg 0 0
幻灯片仍然有效,但它不创建缩略图,告诉我 pagerAnchorBuilder
函数中的 img
变量未定义。
知道“requeuing slideshow”是什么意思以及为什么图像未定义吗?我过去多次使用过这个确切的片段,以前从未遇到过这个问题。
最佳答案
嗯...
var img = jQuery(slide).find("img").attr("src");
如果传入“pagerAnchorBuilder”回调的“幻灯片”将是 <img>
之一“幻灯片”中的元素 <div>
,那么您就不需要“find()”。它应该只是:
var img = jQuery(slide).attr('src');
或者,更简单:
var img = slide.src;
“.find()”方法永远不会包含起始元素;它只查看 DOM 中的后代。
关于javascript - jQuery Cycle - 未加载 img 幻灯片,正在重新排队幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5144612/