Question

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

如何更改以下代码，让我指定为每张幻灯片（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>';
}


    });
});

Answer 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 Plugin将为您完成。但是，这个插件有一些limitations to using images inside anchors。

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

1 个答案: