jquery - 带有锚点和缩略图的 jQuery 循环

Question

我正在使用 jQuery Cycle 插件来构建一个幻灯片，其中主图像被包裹在一个锚点中，并且还具有缩略图导航。我基本上有来自jQuery Cycle演示页面的相同代码。一旦我将图像包裹在一个链接中，缩略图就坏了。我曾尝试删除“slide.src”，$('#slideshow img).attr('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(). 目前你没有结束</ul>标签。最干净的方法是自动关闭标签：

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

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

Answer 2

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