Jquery Cycle：自行车画廊、缩略图和字幕？答案

【问题标题】：Jquery Cycle: Cycling gallery, thumbnails AND captions?Jquery Cycle：自行车画廊、缩略图和字幕？
【发布时间】：2011-07-28 03:53:16
【问题描述】：

我正在使用 Malsup 的 cycle() JQuery 插件，并试图让它同时显示图库中的图像、缩略图列表和每个缩略图下的标题。我的代码如下：

<div id="slideshow">
    <ul>
    <li style="background-image:url(img/jack.jpg);"><a href="#"><img src="img/jack-title.png" alt="Visit Jack"/></a></li>
    <li style="background-image:url(img/jill.jpg);"><a href="#"><img src="img/jill-mysteries.png" alt="Visit Jill"/></a></li>
    <li style="background-image:url(img/jenn.jpg);"><a href="#"><img src="img/jenn-title.png" alt="Visit Jenn"/></a></li>
    </ul>
</div>

<div id="nav"></div>

<script type="text/javascript">
$("#slideshow ul").cycle({
    pager:'#nav',
    pagerAnchorBuilder: function(idx,slide){return '<a href=""><img src="tn_'+idx+'.jp" width="50" height="50"/><br/></a>';
    }
    });
</script>

这一切都很好，除了我似乎无法访问每个循环图像上的 ALT 属性。我想用它来制作标题（在 pagerAnchorBuilder 中的换行符 BR 之后添加）。有谁知道怎么弄？

【问题讨论】：

标签： jquery cycle

【解决方案1】：

看到这个小提琴：http://jsfiddle.net/bwwcq/（当然没有图片）

有问题的行是：

var alt = $('img', slide).attr('alt');

顺便说一句，喜欢这个插件。

【讨论】：

太棒了，就是这样！丹克，谢尔马克斯！ :)

【解决方案2】：

http://jquery.malsup.com/cycle/int2.html

回调每个幻灯片过渡都支持之前和之后的回调。在回调方法的上下文中，this 是正在过渡的元素。

$(this).attr('alt')

未经测试，但应该可以完成工作。

【讨论】：

感谢 bstakes，但我不确定这对我的情况是否有帮助。我需要始终显示带有标题的缩略图，而不是在任何转换之前/之后。