pageAnchorBuilder 问题 - 循环插件 - JQuery：更改图像按钮答案

【问题标题】：pageAnchorBuilder question - Cycle Plugin - JQuery: Changing Image ButtonspageAnchorBuilder 问题 - 循环插件 - JQuery：更改图像按钮
【发布时间】：2010-01-19 21:00:37
【问题描述】：

我正在使用 JQuery 的 Cycle 插件来创建具有 pauseOnHover 功能的横幅旋转器。我让它正常工作，甚至让 pageAnchorBuilder 正常工作，以便它显示图像 vs '1,2,3 等。问题是它找不到图像，因为我没有使用图像作为选择器而是 div。

如何更改以下代码以让我指定为每张幻灯片 (div) 显示哪个唯一图像？当我将图像 url (../images/tab.png) 放在 img src 标签中时，它会显示一个损坏的链接。即使那样工作它也不会完成我想要做的事情，每个 div 显示一个独特的图像。

我正在尝试创建类似这样的 javascript 版本：http://www.bazaarvoice.com

这是我的代码：

banner.js

$(document).ready(function() {
    $('.slideshow').cycle({
        speed:      200,
        timeout:    15000, 
        pager:      '#tabs',
        pagerEvent: 'mouseover',
        pauseOnPagerHover: true,
        pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links:  function(index, DOMelement) 
    return '<a href="path-to-link"><img src="' + slide.src + '" height="47" width="189" /></a>';
}


    });
});

【问题讨论】：

标签： javascript jquery html jquery-plugins

【解决方案1】：

我认为您对 pagerAnchorBuilder 函数的实际含义有错误的想法。您应该已经拥有 DOM 中的元素，并为这些元素返回 JQUERY SELECTOR，它对应于每张幻灯片（通常通过传递给函数的索引）。查看demos here 之一。它可以帮助您更好地了解那里发生的事情。

如果您尝试构建一个滚动浏览锚点的循环，您只需在（大概）div.slidehow 中包含您的锚点 HTML 标记：

<div class="slideshow">
   <a href="path-to-link1"><img src="/images/src1.png" height="47" width="189" /></a>
   <a href="path-to-link2"><img src="/images/src2.png" height="47" width="189" /></a>
</div>

Cycle 插件会为您完成。不过，这个插件有一些limitations to using images inside anchors。

【讨论】：