带有锚点和缩略图的 jQuery Cycle
我正在使用 jQuery Cycle 插件构建一个幻灯片，其中主图像包含在锚点中，并且还具有缩略图导航。我基本上从 jQuery Cycle 的 演示页面 获得了相同的代码。一旦我将图像包装在链接中，缩略图就损坏了。我尝试删除 $('#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>
I'm using the jQuery Cycle plugin to build a slideshow that the main image is wrapped in an anchor and also has the thumbnail navigation. I basically have the same code from the demo page of jQuery Cycle. Once I wrapped the images in a link the thumbnails broke. I have tried dropping the "slide.src" for $('#slideshow img).attr('src') but that still comes back as undefined.
$('#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>';
}
});
And my html is this.
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您需要向
$.before()提供有效的 HTML 片段。目前您没有结束标记。最干净的方法是自动关闭标签：如果您在 Webkit 浏览器中使用 Firebug 或开发人员工具，您始终可以通过编写
console.log($("# Slideshow-nav"));或回调函数中的console.log($(slide));。You need to supply a valid HTML fragment to
$.before(). At the moment you have no closing</ul>tag. The cleanest way to do this is to self-close the tag:If you're using Firebug or the developer tools in a Webkit browser you can always see what elements jQuery is finding by writing
console.log($("#slideshow-nav"));orconsole.log($(slide));in your callback function.没关系，我在脚本的其他地方发现了一个错误，该错误正在修改缩略图，该错误由于某种原因破坏了图像。
Never mind I found an error elsewhere in my script that is modifying the thumbnails that was for some reason breaking the images.