使用 JQuery Cycle，AnchorBuilder 如何找到 DIV 中图像的 SRC？

Question

JQuery Cycle 插件非常棒。对于我的特定安装，我想结合其中的两个示例：缩略图寻呼机及其循环 DIV 而不是图像的能力。

目标是设置一组缩略图，单击这些缩略图即可更改 DIV。该 DIV 将包含大图像和一个包含 HTML 的框（特别是一些链接）。

我在这里做了一个粗略的版本，拇指位于左下角，DIV 为灰色，位于右下角。图片不是我的；我只是为了演示的目的而抓住它：

https://i.sstatic.net/l49Kt.jpg< /a>

目标：单击缩略图，大图和框中的文本都会发生变化。

缩略图是通过获取幻灯片的 SRC 属性并将其缩小来创建的。不幸的是，当图像嵌入到 DIV 中时，插件无法找到 SRC 属性，因此缩略图会损坏。

以下是构建 Cycle 的代码：

<script type="text/javascript">
  $(function() {
    $('#slideshow').after('<ul id="nav">').cycle({
      fx: 'fade',
      speed:  'slow',
      timeout: 0,
      pager:  '#nav',
      pagerAnchorBuilder: function(idx, slide) {
        return '<li><a href="#"><img src="' + slide.src + '" width="49" height="25" /></a></li>';
            }
        });
    });
    </script>

这适用于以下 HTML 块：

<div id="slideshow" class="pics">
    <img src="/images/01_sm.jpg" class="first" title="title" height="329" />
    <img src="/images/02_sm.jpg" title="title" width="642" height="329" />
    <img src="/images/03_sm.jpg" title="title" width="642" height="329" />
</div>

但正如前面提到的，当它们被封装在 DIV 中时会中断：

<div id="slideshow" class="pics">
    <div><img class="slideimg" src="/images/01_sm.jpg" class="first" title="title" height="329" /><div class="menu">foo</div></div>
    <div><img class="slideimg" src="/images/02_sm.jpg" title="title" width="642" height="329" /><div class="menu">foo</div></div>
    <div><img class="slideimg" src="/images/03_sm.jpg" title="title" width="642" height="329" /><div class="menu">foo</div></div>
</div>

因此，有了所有这些，问题就变成了：

如何替换幻灯片。 src 以及可以查看上述 DIV 并找到当前幻灯片的 SRC 的东西？

提前感谢您的帮助。我希望该解决方案足够简单，可以将其添加到不断扩展的 JQuery Cycle 示例列表中。

Answer 1

你尝试过这个吗：

pagerAnchorBuilder: function(idx, slide) {
    return '<li><a href="#"><img src="' + slide.find('img').attr('src') + '" width="49" height="25" /></a></li>';
        }

Answer 2

就像 Vasu 所说......但你必须使用 jQuery(slide) 而不是幻灯片：

pagerAnchorBuilder: function(idx, slide) {
    return '<li><a href="#"><img src="' +
           jQuery(slide).find('img').attr('src') +
           '" width="49" height="25" /></a></li>';
}