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

【问题标题】：Using JQuery Cycle, how can AnchorBuilder find the SRC of an image within a DIV?使用 JQuery Cycle，AnchorBuilder 如何在 DIV 中找到图像的 SRC？
【发布时间】：2011-04-10 03:34:55
【问题描述】：

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

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

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

http://i.stack.imgur.com/l49Kt.jpg

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

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

以下是构建循环的代码：

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

所以有了这一切，问题就变成了：

如何将 slide.src 替换为可以查看上述 DIV 并找到当前幻灯片的 SRC 的内容？

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

【问题讨论】：

标签： jquery image jquery-plugins rotation cycle

【解决方案1】：

你试过了吗：

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

【讨论】：

【解决方案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>';
}

【讨论】：