Question

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

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

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

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

目标：点击缩略图，大图片和框中的文字都会更改。

通过获取幻灯片的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>

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

如何用可以查看上述DIV的内容替换slide.src并找到当前幻灯片的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（幻灯片）而不是幻灯片：

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

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

2 个答案: