带有锚和缩略图的jQuery循环

我正在使用jQuery Cycle插件构建一个幻灯片，主图像被包装在一个锚中，并且还有缩略图导航。我的代码基本上与jQuery循环中的代码相同。一旦我把图片包装在一个链接中，缩略图就断了。我曾尝试删除

$（'#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>';
 }
});

$（'slideshow'）。在（'ul id=“slideshow nav”>'）之前。循环({
外汇：“淡出”，
速度：“慢”，
超时：0，
寻呼机：“#幻灯片导航”，
pagerAnchorBuilder:函数（idx、幻灯片）{
返回“
”；
}
});

我的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>

---

您需要向

$.before（）

提供有效的HTML片段。目前您没有关闭标签。最干净的方法是自动关闭标记：

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

$（'#slideshow'）。在（'
'）之前。循环（{。。。

---

如果您在Webkit浏览器中使用Firebug或开发人员工具，您总是可以通过编写

console.log（$（“#slideshow nav”）；

或

console.log（$（slide））来查看jQuery查找的元素

在你的回调函数中。

别介意我在脚本的其他地方发现了一个错误，修改缩略图是因为某种原因破坏了图像。

是的，我已经记录了它们，它们只是返回为未定义。这发生在我将图像包装在锚定中的幻灯片中之后。在此之前，它起作用了。可能是添加了单击

会破坏插件使用的选择器。如果您在滚动缩略图时只是想获得一个手动光标，请使用CSS中的

光标：指针；

。