jQuery循环使用锚点和缩略图

Question

我正在使用jQuery Cycle插件来构建幻灯片，主图像包含在锚点中并且还具有缩略图导航。我基本上从jQuery Cycle的demo page获得相同的代码。一旦我将图像包裹在一个链接中，缩略图就会破碎。我已经尝试删除$('#slideshow img).attr('src')的“slide.src”，但仍然以未定义的方式返回。

$('#slideshow').before('<ul id="slideshow-nav">').cycle({
 fx: 'fade',
 speed: 'slow',
 timeout: 0,
 pager: '#slideshow-nav',

 pagerAnchorBuilder: function(idx, slide){
 return '<li class="thumbnail"><a href="#"><img class="rounded" src="' + slide.src + '" width="137" height="129" /></a><span class="highlight"></span><span class="gloss"></span></li>';
 }
});

我的HTML就是这个。

<div id="slideshow">
 <a href="#"><img src="images/gyro.jpg"  alt="Gyro"></a>
 <a href="#"><img src="images/gyro.jpg"  alt="Gyro"></a>
 <a href="#"><img src="images/gyro.jpg"  alt="Gyro"></a>
 <a href="#"><img src="images/gyro.jpg"  alt="Gyro"></a>
 </div>

Answer 1

您需要向$.before()提供有效的HTML片段。目前您没有关闭</ul>标记。最简洁的方法是自动关闭标签：

$('#slideshow').before('<ul id="slideshow-nav" />').cycle({ ...

如果您在Webkit浏览器中使用Firebug或开发人员工具，您可以通过在回调函数中编写console.log($("#slideshow-nav"));或console.log($(slide));来查看jQuery找到的元素。

Answer 2

没关系，我在脚本的其他地方发现了一个错误，即修改了由于某种原因破坏图像的缩略图。